@soul-refiner/design-system 0.2.33 → 0.2.35

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/post/post.d.ts

@@ -7,7 +7,9 @@ export interface PostProps extends React.PropsWithChildren {
     authorImage: string;
     content: string;
     createdDate: string;
+    hasComments?: boolean;
+    id?: string;
     images?: string[];
     onComment: (comment: string) => void;
 }
-export declare const Post: ({ actions, author, authorActive, authorHref, authorImage, children, content, createdDate, images, onComment, }: PostProps) => React.JSX.Element;
+export declare const Post: ({ actions, author, authorActive, authorHref, authorImage, children, content, createdDate, hasComments, images, onComment, }: PostProps) => React.JSX.Element;

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

@@ -3,7 +3,7 @@ import React from 'react';
 import styled from 'styled-components';
 import { Avatar, H, P, TextInput } from '../../';
 import { abbrTimeBeforeDate } from './helpers';
-export const Post = ({ actions, author, authorActive, authorHref, authorImage, children, content, createdDate, images, onComment, }) => {
+export const Post = ({ actions, author, authorActive, authorHref, authorImage, children, content, createdDate, hasComments, images, onComment, }) => {
     const id = React.useId();
     const [comment, setComment] = React.useState('');
     const _actions = React.Children.toArray(actions);
@@ -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),
@@ -28,11 +28,11 @@ export const Post = ({ actions, author, authorActive, authorHref, authorImage, c
             images.length > 4 && (React.createElement(H, { as: "p", className: "more-than", "$color": "grey-10", "$fontSize": 28, "$lineHeight": 36, "$semiBold": true },
                 "+",
                 images.length - 4)))),
-        !!_comments.length && React.createElement(CommentWrapper, null, _comments),
+        hasComments && !!_comments.length && (React.createElement(CommentWrapper, null, _comments)),
         !!_actions.length && React.createElement(ActionsWrapper, null, _actions),
-        React.createElement(CommentInputWrapper, { onSubmit: handleCommentSubmit },
+        hasComments && (React.createElement(CommentInputWrapper, { onSubmit: handleCommentSubmit },
             React.createElement(Avatar, { href: authorHref, image: authorImage, size: 40 }),
-            React.createElement(TextInput, { bg: "var(--color-grey-10)", placeholder: "Write a comment", onChange: handleCommentChange, value: comment }))));
+            React.createElement(TextInput, { bg: "var(--color-grey-10)", placeholder: "Write a comment", onChange: handleCommentChange, value: comment })))));
 };
 const Wrapper = styled.div `
   max-width: 700px;

package/package.json

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