fix: fix line-height weirdness

src/components/avatar/Avatar.css

@@ -15,7 +15,7 @@
  font-size: 1rem;
 
  & .initials {
- @mixin typography-overline em, no-line-height;
+ @mixin typography-overline em;
  color: var(--color-science-blue);
  }
 

src/components/button/Button.css

@@ -65,7 +65,7 @@
  }
 
  & .textBlock {
- @mixin typography-body-2 rem, no-line-height;
+ @mixin typography-body-2 rem;
  position: relative;
  height: 100%;
  z-index: 2;

src/components/comment-common/BottomBarPlaceholder.css

@@ -14,7 +14,6 @@
  & .details {
  display: flex;
  align-items: center;
- line-height: 1;
 
  & .dummyDateText {
  width: 3rem;
@@ -26,15 +25,16 @@
  & .dummySeparator {
  margin: 0 1rem;
  color: var(--color-seashell);
- @mixin typography-overline rem, no-line-height;
+ @mixin typography-overline rem;
+ letter-spacing: 0;
 
  &::after {
  content: "•";
  }
  }
 
  & .dummyActionsText {
- width: 6.1rem;
+ width: 5.9rem;
  height: 1rem;
  background-color: var(--color-seashell);
  border-radius: 0.6rem;

src/components/comment-input/CommentInput.css

@@ -19,7 +19,6 @@
  margin-top: 1rem;
  display: flex;
  align-items: center;
- line-height: 1;
 
  & .author {
  margin-right: 1rem;
@@ -32,12 +31,13 @@
 
  & .separator {
  margin: 0 1rem;
- font-size: 1.2rem;
+ opacity: 0.5;
+ color: var(--color-gray);
+ @mixin typography-overline rem;
+ letter-spacing: 0;
 
  &::after {
  content: "•";
- opacity: 0.5;
- color: var(--color-gray);
  }
  }
  }

src/components/comment-replies-header-placeholder/CommentRepliesHeaderPlaceholder.css

@@ -0,0 +1,54 @@
+@import "colors";
+@import "mixins/typography";
+
+.commentRepliesHeaderPlaceholder {
+ min-width: 350px;
+ display: flex;
+ align-items: center;
+
+ & .replyingTo {
+ overflow: hidden;
+ display: flex;
+ flex: 1 0;
+ align-items: center;
+
+ & .replyIcon {
+ width: 1.6rem;
+ height: 1.6rem;
+ color: var(--color-seashell);
+ }
+
+ & .dummyText {
+ width: 14rem;
+ height: 1rem;
+ margin-left: 0.8rem;
+ background-color: var(--color-seashell);
+ border-radius: 0.6rem;
+ }
+
+ & .fakeText {
+ position: relative;
+ left: -1rem;
+ @mixin typography-overline rem;
+ color: var(--color-seashell);
+
+ &::after {
+ content: "-";
+ }
+
+ }
+ }
+
+ & .viewMore {
+ display: flex;
+ align-items: center;
+
+ & .dummyButton {
+ width: 13rem;
+ height: 1rem;
+ margin-left: 0.8rem;
+ background-color: var(--color-seashell);
+ border-radius: 0.6rem;
+ }
+ }
+}

src/components/comment-replies-header-placeholder/CommentRepliesHeaderPlaceholder.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import { ReplyIcon } from '../icon';
+import styles from './CommentRepliesHeaderPlaceholder.css';
+
+const CommentRepliesHeaderPlaceholder = ({ withViewMore, className, ...rest }) => (
+ <div { ...rest } className={ classNames(styles.commentRepliesHeaderPlaceholder, className) }>
+ <div className={ styles.replyingTo }>
+ <ReplyIcon className={ styles.replyIcon } />
+ <span className={ styles.dummyText } />
+ <span className={ styles.fakeText } />
+ </div>
+
+ { withViewMore && (
+ <div className={ styles.viewMore }>
+ <div className={ styles.dummyButton } />
+ </div>
+ ) }
+ </div>
+);
+
+CommentRepliesHeaderPlaceholder.propTypes = {
+ withViewMore: PropTypes.bool,
+ className: PropTypes.string,
+};
+
+export default CommentRepliesHeaderPlaceholder;

src/components/comment-replies-header-placeholder/README.md

@@ -0,0 +1,20 @@
+# CommentRepliesHeaderPlaceholder
+
+A placeholder for the replies header to be used while a comment is loading.
+
+## Usage
+
+```jsx
+import { CommentRepliesHeaderPlaceholder } from '@discussify/styleguide';
+
+<CommentRepliesHeaderPlaceholder />
+```
+
+## Props
+
+| name | type | default | description |
+| ---- | ---- | ------- | ----------- |
+| author | object | *required* | The author of the comment that the replies refer to |
+| withViewMore | bool | false | Show the right that contains the number of remaining comments |
+
+Any other properties supplied will be spread to the root element.

src/components/comment-replies-header-placeholder/index.js

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

src/components/comment-replies-header/CommentRepliesHeader.css

@@ -0,0 +1,47 @@
+@import "colors";
+@import "mixins/typography";
+
+.commentRepliesHeader {
+ min-width: 350px;
+ display: flex;
+ align-items: center;
+
+ & .replyingTo {
+ display: flex;
+ flex: 1 0;
+ align-items: center;
+ color: var(--color-gray);
+
+ & .replyIcon {
+ width: 1.6rem;
+ height: 1.6rem;
+ }
+
+ & .text {
+ @mixin typography-overline rem;
+ margin-left: 0.8rem;
+ }
+ }
+
+ & .viewMore {
+ margin-left: 1rem;
+ display: flex;
+ align-items: center;
+
+ & .button {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ @mixin typography-overline rem;
+ opacity: 0.5;
+ background: none;
+ color: var(--color-gray);
+ cursor: pointer;
+ transition: opacity 0.2s ease;
+
+ &:hover {
+ opacity: 1;
+ }
+ }
+ }
+}

src/components/comment-replies-header/CommentRepliesHeader.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import { ReplyIcon } from '../icon';
+import styles from './CommentRepliesHeader.css';
+
+const CommentRepliesHeader = ({ author, viewMoreCount, onViewMore, className, ...rest }) => (
+ <div { ...rest } className={ classNames(styles.commentRepliesHeader, className) }>
+ <div className={ styles.replyingTo }>
+ <ReplyIcon className={ styles.replyIcon } />
+ <span className={ styles.text }>Replying to: { author.name || 'Unnamed' }</span>
+ </div>
+
+ { viewMoreCount > 0 && onViewMore && (
+ <div className={ styles.viewMore }>
+ <button onClick={ onViewMore } className={ styles.button }>
+ View more replies ({ viewMoreCount })
+ </button>
+ </div>
+ ) }
+ </div>
+);
+
+CommentRepliesHeader.propTypes = {
+ author: PropTypes.object.isRequired,
+ viewMoreCount: PropTypes.number,
+ onViewMore: PropTypes.func,
+ className: PropTypes.string,
+};
+
+export default CommentRepliesHeader;

src/components/comment-replies-header/README.md

@@ -0,0 +1,32 @@
+# CommentRepliesHeader
+
+A header to be rendered whenever showing replies to a comment.
+
+## Usage
+
+```jsx
+import { CommentRepliesHeader } from '@discussify/styleguide';
+
+const author: {
+ did: 'did:uport:2odP6zYTh8K95xztx3qpf3RishNXdUFCkH6',
+ avatar: 'https://ipfs.infura.io/ipfs/Qme2BurB5BFTLxTqmjUBu7qgsE96iCpf6iJD9MurhBRoSC',
+ name: 'André Cruz',
+};
+
+<CommentRepliesHeader
+ author={ author }
+ viewMoreCount={ 10 }
+ onViewMore={ handleViewMore } />
+```
+
+## Props
+
+| name | type | default | description |
+| ---- | ---- | ------- | ----------- |
+| author | object | *required* | The author of the comment that the replies refer to |
+| viewMoreCount | number | 0 | The number of replies that are hidden, where 0 hides the counter |
+| onViewMore | bool | | Function to be called when onViewMore is clicked |
+
+Any other properties supplied will be spread to the root element.
+
+Note that if `onViewMore` is not set, the counter will be hidden.

src/components/comment-replies-header/index.js

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

src/components/comment/Comment.css

@@ -74,7 +74,6 @@
  margin-top: 1rem;
  display: flex;
  align-items: center;
- line-height: 1;
 
  & .author {
  margin-right: 1rem;
@@ -89,7 +88,7 @@
  margin: 0;
  padding: 0;
  border: 0;
- @mixin typography-overline rem, no-line-height;
+ @mixin typography-overline rem;
  opacity: 0.5;
  background: none;
  color: var(--color-gray);
@@ -109,7 +108,8 @@
  margin: 0 1rem;
  opacity: 0.5;
  color: var(--color-gray);
- font-size: 1.2rem;
+ @mixin typography-overline rem;
+ letter-spacing: 0;
 
  &::after {
  content: "•";

src/components/text-button/TextButton.css

@@ -9,7 +9,6 @@
  color: var(--color-gray);
  font-size: 1rem;
  text-transform: uppercase;
- line-height: inherit;
  white-space: nowrap;
  transition-property: opacity, color;
  transition-duration: 0.2s;
@@ -32,7 +31,7 @@
 
  & .text {
  display: inline-block;
- @mixin typography-caption rem, no-line-height;
+ @mixin typography-caption rem;
  vertical-align: middle;
  }