feat: add comment components

Also:
- Add retry icon and tweak other icons
- Update text button according to last spec
- Support disabling preload in avatar

package.json

@@ -41,6 +41,7 @@
     "@moxy/grow-element-fn": "^1.0.6",
     "classnames": "^2.2.6",
     "date-is-invalid": "^1.0.10",
+    "is-whitespace": "^0.3.0",
     "keyboard-only-outlines": "^1.0.1",
     "lodash": "^4.17.10",
     "normalize.css": "^8.0.0",
@@ -69,7 +70,7 @@
     "eslint-config-moxy": "^6.0.1",
     "external-svg-sprite-loader": "^3.4.1",
     "husky": "^1.0.0",
-    "lint-staged": "^7.2.0",
+    "lint-staged": "^8.0.0",
     "marked": "^0.5.1",
     "postcss-cli": "^6.0.0",
     "postcss-preset-moxy": "^2.3.0",

src/components/avatar/Avatar.js

@@ -5,22 +5,34 @@ import PreloadImage from 'react-preload-image';
 import getInitials from './initials';
 import styles from './Avatar.css';
 
-const Avatar = ({ name, image, lazy, className, ...rest }) => {
+const Image = ({ preloadImage, ...rest }) => preloadImage ?
+    <PreloadImage { ...rest } /> :
+    <img { ...rest } alt="" />;
+
+Image.propTypes = {
+    preloadImage: PropTypes.bool,
+};
+
+const Avatar = ({ name, image, preloadImage, className, ...rest }) => {
     const finalClassName = classNames(styles.avatar, className);
 
     return (
         <div { ...rest } className={ finalClassName }>
             <span className={ styles.initials }>{ getInitials(name) || '?' }</span>
-            { image ? <PreloadImage className={ styles.image } src={ image } lazy={ lazy } /> : null }
+            { image && <Image src={ image } preloadImage={ preloadImage } className={ styles.image } /> }
         </div>
     );
 };
 
 Avatar.propTypes = {
     name: PropTypes.string,
     image: PropTypes.string,
-    lazy: PropTypes.bool,
+    preloadImage: PropTypes.bool,
     className: PropTypes.string,
 };
 
+Avatar.defaultProps = {
+    preloadImage: true,
+};
+
 export default Avatar;

src/components/avatar/README.md

@@ -8,7 +8,19 @@ Avatar to render the user's image, fallbacks to the user's initials.
 import { Avatar } from '@discussify/styleguide';
 
 <Avatar name="André Cruz" />
-<Avatar name="André Cruz" image="https://en.gravatar.com/userimage/102855892/467eb9028a2018993024d612255dc20e.png" />
+<Avatar
+    name="André Cruz"
+    image="https://ipfs.infura.io/ipfs/Qme2BurB5BFTLxTqmjUBu7qgsE96iCpf6iJD9MurhBRoSC" />
+```
+
+### Changing the size
+
+You may change the icon size via the `fontSize` CSS property (defaults to `1rem`).
+
+```jsx
+import { Avatar } from '@discussify/styleguide';
+
+<Avatar name="André Cruz" style={ { fontSize: '2rem' } } />
 ```
 
 ## Props
@@ -17,6 +29,6 @@ import { Avatar } from '@discussify/styleguide';
 | ---- | ---- | ------- | ----------- |
 | name | string | | The user's name |
 | image | string | | The user's image |
-| lazy | bool | false | Load the user's image only when it's about to enter the viewport |
+| preloadImage | bool | true | Show the user's image only when it's loaded |
 
 Any other properties supplied will be spread to the root element.

src/components/comment-common/Author.css

@@ -0,0 +1,12 @@
+@import "mixins/typography";
+
+.author {
+    display: flex;
+    align-items: center;
+
+    & .name {
+        @mixin typography-caption rem;
+        margin-left: 1.5rem;
+        flex: 1 1;
+    }
+}

src/components/comment-common/Author.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import Avatar from '../avatar';
+import styles from './Author.css';
+
+const Author = ({ author, myself, preloadAvatarImage, className }) => (
+    <div className={ classNames(styles.author, className) }>
+        <Avatar
+            name={ author.name }
+            image={ author.avatar }
+            preloadImage={ preloadAvatarImage } />
+
+        <span className={ styles.name }>
+            { author.name }
+            { myself && ' (You)' }
+        </span>
+    </div>
+);
+
+Author.propTypes = {
+    author: PropTypes.object.isRequired,
+    myself: PropTypes.bool,
+    preloadAvatarImage: PropTypes.bool,
+    className: PropTypes.string,
+};
+
+export default Author;

src/components/comment-common/AuthorPlaceholder.css

@@ -0,0 +1,24 @@
+@import "colors";
+
+.authorPlaceholder {
+    display: flex;
+    flex: 1 0;
+    align-items: center;
+
+    & .dummyAvatar {
+        width: 3rem;
+        height: 3rem;
+        display: inline-block;
+        background-color: var(--color-seashell);
+        border-radius: 50%;
+    }
+
+    & .dummyNameText {
+        max-width: 14rem;
+        height: 1rem;
+        margin-left: 1.5rem;
+        flex: 1 1;
+        background-color: var(--color-seashell);
+        border-radius: 0.6rem;
+    }
+}

src/components/comment-common/AuthorPlaceholder.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import styles from './AuthorPlaceholder.css';
+
+const AuthorPlaceholder = ({ className }) => (
+    <div className={ classNames(styles.authorPlaceholder, className) }>
+        <div className={ styles.dummyAvatar } />
+        <div className={ styles.dummyNameText } />
+    </div>
+);
+
+AuthorPlaceholder.propTypes = {
+    className: PropTypes.string,
+};
+
+export default AuthorPlaceholder;

src/components/comment-common/BottomBarPlaceholder.css

@@ -0,0 +1,43 @@
+@import "colors";
+@import "mixins/typography";
+
+.bottomBarPlaceholder {
+    margin-top: 1.5rem;
+    display: flex;
+    justify-content: space-between;
+
+    & .author {
+        width: 45%;
+        margin-right: 1rem;
+    }
+
+    & .details {
+        display: flex;
+        align-items: center;
+        line-height: 1;
+
+        & .dummyDateText {
+            width: 3rem;
+            height: 1rem;
+            background-color: var(--color-seashell);
+            border-radius: 0.6rem;
+        }
+
+        & .dummySeparator {
+            margin: 0 1rem;
+            color: var(--color-seashell);
+            @mixin typography-overline rem, no-line-height;
+
+            &::after {
+                content: "•";
+            }
+        }
+
+        & .dummyActionsText {
+            width: 6.1rem;
+            height: 1rem;
+            background-color: var(--color-seashell);
+            border-radius: 0.6rem;
+        }
+    }
+}

src/components/comment-common/BottomBarPlaceholder.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import AuthorPlaceholder from './AuthorPlaceholder';
+import styles from './BottomBarPlaceholder.css';
+
+const BottomBarPlaceholder = ({ className }) => (
+    <div className={ classNames(styles.bottomBarPlaceholder, className) }>
+        <AuthorPlaceholder className={ styles.author } />
+
+        <div className={ styles.details }>
+            <span className={ styles.dummyDateText } />
+            <span className={ styles.dummySeparator } />
+            <span className={ styles.dummyActionsText } />
+        </div>
+    </div>
+);
+
+BottomBarPlaceholder.propTypes = {
+    className: PropTypes.string,
+};
+
+export default BottomBarPlaceholder;

src/components/comment-common/index.js

@@ -0,0 +1,3 @@
+export { default as Author } from './Author';
+export { default as AuthorPlaceholder } from './AuthorPlaceholder';
+export { default as BottomBarPlaceholder } from './BottomBarPlaceholder';

src/components/comment-error/CommentError.css

@@ -0,0 +1,45 @@
+@import "colors";
+@import "mixins/typography";
+
+.commentError {
+    min-width: 35rem;
+
+    & .content {
+        position: relative;
+
+        & .message {
+            padding: 1.8rem 2rem;
+            @mixin typography-body-2 rem;
+            background-color: var(--color-seashell);
+            border-radius: 0.8rem 0.8rem 0.8rem 0;
+        }
+
+        & .actions {
+            position: absolute;
+            right: 0;
+            bottom: 0;
+            padding: 1rem;
+            display: flex; /* Remove extra space because of inline-block of children */
+            background-color: var(--color-seashell);
+            border-radius: 0.8rem;
+
+            & .icon {
+                width: 1.6rem;
+                height: 1.6rem;
+                color: var(--color-gray);
+
+                &:not(:last-child) {
+                    margin-right: 1rem;
+                }
+            }
+        }
+
+        &:hover .actions .icon {
+            fill: var(--color-science-blue);
+        }
+    }
+
+    & .bottomBar {
+        margin-top: 1rem;
+    }
+}

src/components/comment-error/CommentError.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import { RetryIcon } from '../icon';
+import { BottomBarPlaceholder } from '../comment-common';
+import styles from './CommentError.css';
+
+const CommentError = ({ onRetry, className, ...rest }) => (
+    <div { ...rest } className={ classNames(styles.commentError, className) }>
+        <div className={ styles.content }>
+            <pre className={ styles.message }>
+                This comment couldn&#39;t be loaded.
+                { '\n\n' }
+            </pre>
+
+            <div className={ styles.actions }>
+                <RetryIcon
+                    interactive
+                    onClick={ onRetry }
+                    className={ styles.icon } />
+            </div>
+        </div>
+
+        <BottomBarPlaceholder className={ styles.bottomBar } />
+    </div>
+);
+
+CommentError.propTypes = {
+    onRetry: PropTypes.func.isRequired,
+    className: PropTypes.string,
+};
+
+export default CommentError;

src/components/comment-error/README.md

@@ -0,0 +1,19 @@
+# CommentError
+
+A component to be used when a comment failed to load.
+
+## Usage
+
+```jsx
+import { CommentError } from '@discussify/styleguide';
+
+<CommentError />
+```
+
+## Props
+
+| name | type | default | description |
+| ---- | ---- | ------- | ----------- |
+| onRetry | func | *required* | Function to call when retry is clicked |
+
+Any other properties supplied will be spread to the root element.

src/components/comment-error/index.js

@@ -0,0 +1 @@
+export { default } from './CommentError';

src/components/comment-input/CommentInput.css

@@ -0,0 +1,45 @@
+@import "colors";
+@import "mixins/typography";
+
+.commentInput {
+    min-width: 350px;
+
+    & .textarea {
+        width: 100%;
+        padding: 1.7rem 1.9rem;
+        display: block; /* Remove extra space at the bottom */
+        border: none;
+        border: 1px solid var(--color-gray);
+        background-color: var(--color-white);
+        border-radius: 0.8rem 0.8rem 0.8rem 0;
+        @mixin typography-body-2 rem;
+    }
+
+    & .bottomBar {
+        margin-top: 1rem;
+        display: flex;
+        align-items: center;
+        line-height: 1;
+
+        & .author {
+            margin-right: 1rem;
+            flex: 1 0;
+        }
+
+        & .actions {
+            display: inline-flex;
+            align-items: center;
+
+            & .separator {
+                margin: 0 1rem;
+                font-size: 1.2rem;
+
+                &::after {
+                    content: "•";
+                    opacity: 0.5;
+                    color: var(--color-gray);
+                }
+            }
+        }
+    }
+}