@soul-refiner/design-system 0.2.34 → 0.2.36

package/dist/components/atoms/typography/heading.d.ts

@@ -7,39 +7,40 @@ export interface HeadingProps extends CommonProps {
     as?: React.ElementType;
     $fontSize?: 16 | 18 | 20 | 24 | 28 | 32 | 36 | 40 | 48;
     $lineHeight?: 64 | 60 | 54 | 48 | 36 | 28 | 26;
+    $sx?: string;
 }
 export declare const H: {
-    (args: HeadingProps): React.JSX.Element;
+    ({ sx, ...args }: HeadingProps): React.JSX.Element;
     One: {
-        ({ ...rest }: CommonProps): React.JSX.Element;
+        ({ sx, ...rest }: CommonProps): React.JSX.Element;
         displayName: string;
     };
     Two: {
-        ({ ...rest }: CommonProps): React.JSX.Element;
+        ({ sx, ...rest }: CommonProps): React.JSX.Element;
         displayName: string;
     };
     Three: {
-        ({ ...rest }: CommonProps): React.JSX.Element;
+        ({ sx, ...rest }: CommonProps): React.JSX.Element;
         displayName: string;
     };
     Four: {
-        ({ ...rest }: CommonProps): React.JSX.Element;
+        ({ sx, ...rest }: CommonProps): React.JSX.Element;
         displayName: string;
     };
     Five: {
-        ({ ...rest }: CommonProps): React.JSX.Element;
+        ({ sx, ...rest }: CommonProps): React.JSX.Element;
         displayName: string;
     };
     Six: {
-        ({ ...rest }: CommonProps): React.JSX.Element;
+        ({ sx, ...rest }: CommonProps): React.JSX.Element;
         displayName: string;
     };
     Seven: {
-        ({ ...rest }: CommonProps): React.JSX.Element;
+        ({ sx, ...rest }: CommonProps): React.JSX.Element;
         displayName: string;
     };
     Eight: {
-        ({ ...rest }: CommonProps): React.JSX.Element;
+        ({ sx, ...rest }: CommonProps): React.JSX.Element;
         displayName: string;
     };
 };

package/dist/components/atoms/typography/heading.js

@@ -6,29 +6,30 @@ const StyledH = styled(Typography) `
   font-size: ${({ $fontSize }) => $fontSize + 'px'};
   line-height: ${({ $lineHeight }) => $lineHeight + 'px'};
   text-align: ${({ $textAlign }) => $textAlign || 'left'};
+  ${({ $sx }) => ($sx ? $sx : '')}
 `;
-export const H = (args) => React.createElement(StyledH, { ...args });
-const One = ({ ...rest }) => (React.createElement(StyledH, { as: 'h1', "$fontSize": 48, "$lineHeight": 64, ...rest }));
+export const H = ({ sx, ...args }) => (React.createElement(StyledH, { "$sx": sx, ...args }));
+const One = ({ sx, ...rest }) => (React.createElement(StyledH, { as: 'h1', "$fontSize": 48, "$lineHeight": 64, "$sx": sx, ...rest }));
 One.displayName = 'H.One';
 H.One = One;
-const Two = ({ ...rest }) => (React.createElement(StyledH, { as: 'h2', "$fontSize": 40, "$lineHeight": 60, ...rest }));
+const Two = ({ sx, ...rest }) => (React.createElement(StyledH, { as: 'h2', "$fontSize": 40, "$lineHeight": 60, "$sx": sx, ...rest }));
 Two.displayName = 'H.Two';
 H.Two = Two;
-const Three = ({ ...rest }) => (React.createElement(StyledH, { as: 'h3', "$fontSize": 36, "$lineHeight": 54, ...rest }));
+const Three = ({ sx, ...rest }) => (React.createElement(StyledH, { as: 'h3', "$fontSize": 36, "$lineHeight": 54, "$sx": sx, ...rest }));
 Three.displayName = 'H.Three';
 H.Three = Three;
-const Four = ({ ...rest }) => (React.createElement(StyledH, { as: 'h4', "$fontSize": 32, "$lineHeight": 48, ...rest }));
+const Four = ({ sx, ...rest }) => (React.createElement(StyledH, { as: 'h4', "$fontSize": 32, "$lineHeight": 48, "$sx": sx, ...rest }));
 Four.displayName = 'H.Four';
 H.Four = Four;
-const Five = ({ ...rest }) => (React.createElement(StyledH, { as: 'h5', "$fontSize": 28, "$lineHeight": 36, ...rest }));
+const Five = ({ sx, ...rest }) => (React.createElement(StyledH, { as: 'h5', "$fontSize": 28, "$lineHeight": 36, "$sx": sx, ...rest }));
 Five.displayName = 'H.Five';
 H.Five = Five;
-const Six = ({ ...rest }) => (React.createElement(StyledH, { as: 'h6', "$fontSize": 24, "$lineHeight": 36, ...rest }));
+const Six = ({ sx, ...rest }) => (React.createElement(StyledH, { as: 'h6', "$fontSize": 24, "$lineHeight": 36, "$sx": sx, ...rest }));
 Six.displayName = 'H.Six';
 H.Six = Six;
-const Seven = ({ ...rest }) => (React.createElement(StyledH, { as: 'h6', "$fontSize": 20, "$lineHeight": 28, ...rest }));
+const Seven = ({ sx, ...rest }) => (React.createElement(StyledH, { as: 'h6', "$fontSize": 20, "$lineHeight": 28, "$sx": sx, ...rest }));
 Seven.displayName = 'H.Seven';
 H.Seven = Seven;
-const Eight = ({ ...rest }) => (React.createElement(StyledH, { as: 'h6', "$fontSize": 18, "$lineHeight": 26, ...rest }));
+const Eight = ({ sx, ...rest }) => (React.createElement(StyledH, { as: 'h6', "$fontSize": 18, "$lineHeight": 26, "$sx": sx, ...rest }));
 Eight.displayName = 'H.Eight';
 H.Eight = Eight;

package/dist/components/surfaces/comment/comment.d.ts

@@ -4,6 +4,7 @@ export interface CommentProps {
     createdDate: Date;
     onComment: (comment: string) => void;
     onReact: (reaction: string) => void;
+    onShowReplies?: () => void;
     reactions?: Record<string, number>;
     replies?: CommentProps[];
     userImageUri: string;
@@ -11,4 +12,4 @@ export interface CommentProps {
     userReactions?: string[];
     userProfileUri: string;
 }
-export declare const Comment: ({ content, createdDate, onComment, onReact, reactions, replies, userImageUri, userName, userReactions, userProfileUri, }: CommentProps) => React.JSX.Element;
+export declare const Comment: ({ content, createdDate, onComment, onReact, onShowReplies, reactions, replies, userImageUri, userName, userReactions, userProfileUri, }: CommentProps) => React.JSX.Element;

package/dist/components/surfaces/comment/comment.js

@@ -3,14 +3,16 @@ import React from 'react';
 import styled from 'styled-components';
 import Picker from '@emoji-mart/react';
 import { Avatar, Box, P, TextInput } from '../../';
+import { Button } from '../../actions/button';
 import emojis from '../../../emoji/emojis.json';
 import { ThumbsUp, Comment as CommentIcon } from '../../../icons';
 import { abbrTimeBeforeDate } from './helpers';
 import { Styles } from '../../../common';
-export const Comment = ({ content, createdDate, onComment, onReact, reactions, replies, userImageUri, userName, userReactions, userProfileUri, }) => {
+export const Comment = ({ content, createdDate, onComment, onReact, onShowReplies, reactions, replies, userImageUri, userName, userReactions, userProfileUri, }) => {
     const id = React.useId();
     const [showPicker, setShowPicker] = React.useState(false);
-    const [toggleShowComment, setToggleShowComment] = React.useState(false);
+    const [toggleShowCommentInput, setShowCommentInput] = React.useState(false);
+    const [toggleShowReplies, setShowReplies] = React.useState(false);
     const [comment, setComment] = React.useState('');
     const handleCommentChange = (event) => {
         setComment(event.target.value);
@@ -30,7 +32,11 @@ export const Comment = ({ content, createdDate, onComment, onReact, reactions, r
         setShowPicker((prev) => !prev);
     };
     const handlePickerBlur = () => setShowPicker(false);
-    const handleToggleShowComment = () => setToggleShowComment((prev) => !prev);
+    const handleToggleCommentInput = () => setShowCommentInput((prev) => !prev);
+    const handleToggleReplies = () => {
+        onShowReplies && onShowReplies();
+        setShowReplies((prev) => !prev);
+    };
     const createdTime = abbrTimeBeforeDate(createdDate);
     const reactionElements = reactions &&
         Object.entries(reactions)
@@ -52,14 +58,18 @@ export const Comment = ({ content, createdDate, onComment, onReact, reactions, r
                     React.createElement(P, { sx: "letter-spacing: -0.176px;" }, content)),
                 React.createElement(Box, { "$align": "flex-start", "$dir": "row", "$display": "flex", "$gap": 16, sx: "margin: 8px 0px; position: relative;" },
                     React.createElement(ThumbsUp, { color: "primary-blue-2", onClick: handlePicker, size: 24, sx: "border-radius: 50%; cursor: pointer; flex-shrink: 0;" }),
-                    React.createElement(CommentIcon, { color: "primary-blue-2", onClick: handleToggleShowComment, size: 24, sx: "border-radius: 50%; cursor: pointer; flex-shrink: 0;" }),
+                    React.createElement(CommentIcon, { color: "primary-blue-2", onClick: handleToggleCommentInput, size: 24, sx: "border-radius: 50%; cursor: pointer; flex-shrink: 0;" }),
                     React.createElement(P, { "$color": "grey-7" }, "\u2022"),
                     React.createElement(P, { "$color": "grey-4", "$fontSize": 12, "$lineHeight": 24, sx: "flex-shrink: 0;" }, createdTime),
                     React.createElement(Box, { "$display": "flex", "$flow": "row wrap", "$gap": 6, sx: "max-width: calc(100% - 190px); margin-left: auto;" }, reactionElements),
                     showPicker && (React.createElement(PickerWrapper, null,
                         React.createElement(Picker, { data: emojis, onEmojiSelect: handleReaction, onClickOutside: handlePickerBlur, maxFrequentRows: 1, navPosition: "none", previewPosition: "none", perLine: 9, theme: "auto" }))))),
-            hasReplies && React.createElement(RepliesWrapper, null, replyElements),
-            toggleShowComment && (React.createElement(CommentWrapper, { onSubmit: handleCommentSubmit },
+            hasReplies && !toggleShowReplies && (React.createElement(RepliesWrapper, null,
+                React.createElement(ReplyWrapper, { "$isNotLastReply": false },
+                    React.createElement(Button, { onClick: handleToggleReplies, size: "small", sx: "color: var(--color-grey-3);", type: "text" }, "show replies"),
+                    React.createElement(ReplyIndicator, null)))),
+            hasReplies && toggleShowReplies && (React.createElement(RepliesWrapper, null, replyElements)),
+            toggleShowCommentInput && (React.createElement(CommentWrapper, { onSubmit: handleCommentSubmit },
                 React.createElement(TextInput, { bg: "var(--color-grey-10)", placeholder: "Write a reply", onChange: handleCommentChange, value: comment }))))));
 };
 const Wrapper = styled.div `

package/dist/components/surfaces/post/post.d.ts

@@ -8,6 +8,7 @@ export interface PostProps extends React.PropsWithChildren {
     content: string;
     createdDate: string;
     hasComments?: boolean;
+    id?: string;
     images?: string[];
     onComment: (comment: string) => void;
 }

package/dist/components/surfaces/post/post.js

@@ -18,7 +18,7 @@ export const Post = ({ actions, author, authorActive, authorHref, authorImage, c
         setComment('');
     };
     const subtitle = abbrTimeBeforeDate(new Date(createdDate));
-    return (React.createElement(Wrapper, null,
+    return (React.createElement(Wrapper, { id: id },
         React.createElement(Header, null,
             React.createElement(Avatar, { href: authorHref, image: authorImage, size: 64, status: authorActive ? 'online' : undefined, subtitle: React.createElement(P, { as: "span", sx: "vertical-align: top;", "$fontSize": 14, "$lineHeight": 20 }, subtitle), title: React.createElement(H, { as: "span", "$bold": true, "$fontSize": 18, "$lineHeight": 26 }, author), textPosition: "right" })),
         React.createElement(P, { "$sx": "padding: 24px;" }, content),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soul-refiner/design-system",
-  "version": "0.2.34",
+  "version": "0.2.36",
   "main": "dist/index.js",
   "license": "MIT",
   "publishConfig": {