@soul-refiner/design-system 0.2.70 → 0.2.72

package/dist/components/input/filter/filter.js

@@ -155,6 +155,7 @@ const Outlined = styled.button `
   border: 1px solid var(--color-grey-8);
   border-radius: 8px;
   background-color: var(--color-white);
+  font-family: var(--font-inter);
 
   &:hover {
     background-color: var(--color-grey-9);
@@ -165,6 +166,7 @@ const Pill = styled.button `
   ${Styles.flex}
   border-radius: 24px;
   background-color: var(--color-primary-blue-4);
+  font-family: var(--font-inter);
 
   & > * {
     color: var(--color-primary-blue-2);
@@ -181,6 +183,7 @@ const Labeled = styled.button `
   border-radius: 24px;
   border: 1px solid var(--color-grey-8);
   background-color: var(--color-white);
+  font-family: var(--font-inter);
 
   &:hover {
     background-color: var(--color-grey-9);
@@ -196,6 +199,7 @@ const Avatar = styled.button `
   ${Styles.flex}
   padding: 4px 16px;
   border-radius: 32px;
+  font-family: var(--font-inter);
 
   &:hover {
     background-color: var(--color-grey-10);
@@ -217,6 +221,7 @@ const Text = styled.button `
   gap: 8px;
   background-color: transparent;
   border-radius: 32px;
+  font-family: var(--font-inter);
 
   &:hover {
     background-color: var(--color-grey-10);

package/dist/components/input/text_area/text_area.js

@@ -18,7 +18,7 @@ export const TextArea = ({ bg = 'var(--color-blue-10)', disabled, helperText, ic
             icon,
             React.createElement(TextAreaElement, { disabled: disabled, name: name, onChange: onChange, placeholder: placeholder, ref: ref, value: maxCharacters
                     ? value.slice(0, maxCharacters - 1)
-                    : value, "$resize": resize }),
+                    : value, "$minHeight": minHeight, "$resize": resize }),
             successful && React.createElement(CheckmarkCircle, { color: "green-3" }),
             warning && React.createElement(AlertCircle, { color: "red-4" })),
         React.createElement(Box, { "$gap": 16, "$justify": "space-between" },
@@ -75,6 +75,7 @@ const InputWrapper = styled.div `
   ${({ $warning }) => $warning ? 'border-color: var(--color-red-4) !important;' : ''}
 `;
 const TextAreaElement = styled.textarea `
+  min-width: ${({ $minHeight }) => ($minHeight ? $minHeight - 24 + 'px;' : '')}
   padding: 0px;
   flex: 1;
   font-family: var(--font-inter);

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

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

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

@@ -1,27 +1,38 @@
 'use client';
 import React from 'react';
 import styled from 'styled-components';
-import { Avatar, H, P } from '../../';
+import { H, P } from '../../atoms/typography';
+import { Button } from '../../actions/button';
+import { Avatar } from '../../iconography/avatar';
+import { Lock } from '../../../icons';
 import { abbrTimeBeforeDate } from './helpers';
-export const Post = ({ actions, author, authorActive, authorHref, authorImage, children, content, createdDate, hasComments, images, }) => {
-    const id = React.useId();
+export const Post = ({ actions, author, authorActive, authorHref, authorImage, content, createdDate, dropdown, id, images, isPaywalled = false, onJoin, }) => {
+    const componentId = React.useId();
     const _actions = React.Children.toArray(actions);
-    const _comments = React.Children.toArray(children);
     const subtitle = abbrTimeBeforeDate(new Date(createdDate));
     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),
-        !!images?.length && (React.createElement(ImagesWrapper, { "$numImages": images.length },
-            images.slice(0, 4).map((url, i) => (React.createElement(ImageWrapper, { key: `${id}${url.slice(0, 15)}${i}` },
+            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" }),
+            dropdown),
+        !!content?.length && (React.createElement("div", { style: { padding: 24 } },
+            React.createElement(P, { "$textClampLines": isPaywalled ? 2 : undefined }, content))),
+        !!images?.length && (React.createElement(ImagesWrapper, { "$numImages": images.length, "$isPaywalled": isPaywalled },
+            images.slice(0, 4).map((url, i) => (React.createElement(ImageWrapper, { key: `${componentId}${url.slice(0, 15)}${i}` },
                 React.createElement("img", { src: url, alt: "" })))),
             images.length > 4 && (React.createElement(H, { as: "p", className: "more-than", "$color": "grey-10", "$fontSize": 28, "$lineHeight": 36, "$semiBold": true },
                 "+",
                 images.length - 4)))),
-        !!_actions.length && React.createElement(ActionsWrapper, null, _actions),
-        hasComments && !!_comments.length && (React.createElement(CommentWrapper, null, _comments))));
+        !!images?.length && isPaywalled && (React.createElement(PaywallWrapper, null,
+            React.createElement(Lock, { size: 40, color: "grey-7" }),
+            React.createElement(P, { "$fontSize": 14, "$bold": true, "$lineHeight": 20, "$color": "white" },
+                "Become a member",
+                React.createElement("br", null),
+                "to unlock this post"),
+            React.createElement(Button, { onClick: onJoin, size: "small", sx: "width: 213px;", type: "outlined" }, "Join now"))),
+        !!_actions.length && (React.createElement(ActionsWrapper, null, !isPaywalled && _actions))));
 };
 const Wrapper = styled.div `
+  position: relative;
   max-width: 700px;
   width: 100%;
   background-color: var(--color-white);
@@ -78,6 +89,13 @@ const ImagesWrapper = styled.div `
       height: 100%;
     }
     `}
+
+  ${({ $isPaywalled }) => $isPaywalled
+    ? /** TODO REMOVE USER CAN CHANGE -> SECURITY */
+        `
+    filter: blur(10px) brightness(0.6);
+    clip-path: inset(0px 0px 0px 0px);`
+    : ''}
 `;
 const ImageWrapper = styled.div `
   position: relative;
@@ -85,16 +103,18 @@ const ImageWrapper = styled.div `
   flex: 1;
   min-width: min(227px, 80vw);
 `;
+const PaywallWrapper = styled.div `
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  align-items: center;
+  top: 310px;
+  left: 242px;
+`;
 const ActionsWrapper = styled.div `
   display: flex;
   justify-content: space-around;
   align-items: center;
   padding: 24px;
-  border-bottom: 1px solid var(--color-grey-9);
-`;
-const CommentWrapper = styled.div `
-  padding: 24px;
-  display: flex;
-  flex-flow: column nowrap;
-  gap: 24px;
 `;

package/package.json

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