@soul-refiner/design-system 0.2.20 → 0.2.22

package/dist/components/card/action/action.js

@@ -11,7 +11,7 @@ export const ActionCard = ({ actions, content, href, image, logo, subtitle, sx,
                 React.createElement(LogoWrapper, null, logo),
                 React.createElement(H, { as: "span", "$mediumBold": true, "$color": "grey-2", "$fontSize": 18, "$lineHeight": 26 }, title),
                 React.createElement(P, { as: "span", "$color": "grey-4", "$fontSize": 12, "$lineHeight": 16 }, subtitle),
-                React.createElement(P, { as: "span", "$color": "grey-3", "$fontSize": 14, "$lineHeight": 20, "$textAlign": "center", sx: "margin-top: 12px;" }, content),
+                React.createElement(P, { as: "span", "$color": "grey-3", "$fontSize": 14, "$lineHeight": 20, "$textAlign": "center", "$textClampLines": 3, sx: "margin-top: 12px;" }, content),
                 React.createElement(Box, { "$display": "flex", "$dir": "row", "$gap": 8, sx: "margin-top: 8px; width: 100%;" }, React.Children.toArray(actions))))));
 };
 const Wrapper = styled.div `
@@ -29,10 +29,17 @@ const Action = styled.figure `
   flex-flow: column nowrap;
   justify-content: flex-end;
   box-shadow: var(--elevation-1);
+  border: 1px solid transparent;
+  box-sizing: border-box;
+
+  &:hover {
+    border-color: var(--color-primary-blue-3);
+  }
 
   & > img {
     aspect-ratio: 310 / 160;
     border-radius: 16px 16px 0px 0px;
+    object-fit: cover;
   }
 
   ${({ $sx }) => ($sx ? $sx : '')};
@@ -42,8 +49,8 @@ const Figcaption = styled.figcaption `
   display: flex;
   align-items: center;
   flex-flow: column nowrap;
-  aspect-ratio: 310 / 198;
-  padding: 56px 16px 16px;
+  aspect-ratio: 310 / 214;
+  padding: 36px 16px 16px;
   box-sizing: border-box;
   background-color: var(--color-white);
   border-radius: 0px 0px 15px 15px;

package/dist/components/editor/editor.d.ts

@@ -3,7 +3,7 @@ import { TElement } from '@udecode/plate';
 export interface EditorProps {
     communityName: string;
     editable: boolean;
-    handleUploadImage: (dataURL: File) => Promise<string>;
+    handleUploadImage: (files: FileList) => Promise<string>;
     onChange: (newNodes: TElement[]) => void;
 }
 export declare const Editor: ({ editable, handleUploadImage, onChange, }: EditorProps) => React.JSX.Element;

package/dist/components/editor/navbar/navbar.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 export interface EditorBarProps {
-    handleUploadImage: (dataURL: File) => Promise<string>;
+    handleUploadImage: (files: FileList) => Promise<string>;
 }
 export declare const EditorBar: ({ handleUploadImage }: EditorBarProps) => React.JSX.Element;
 export declare const MenuButton: import("styled-components").IStyledComponent<"web", "button", {

package/dist/components/editor/navbar/navbar.js

@@ -59,20 +59,20 @@ export const EditorBar = ({ handleUploadImage }) => {
             },
         ]);
     };
-    const handleImageChange = async (event) => {
-        const file = event.target?.files?.[0];
-        if (!file)
+    const handleImageChange = async () => {
+        const files = imageRef.current?.files;
+        if (!files)
             return;
-        const imageurl = await handleUploadImage(file);
+        const imageurl = await handleUploadImage(files);
         if (imageurl) {
             insertImage(editorRef, imageurl);
         }
     };
     const handleRedo = () => editorRef.redo();
     const handleUndo = () => editorRef.undo();
-    const handleVideoChange = async (event) => {
-        const file = event.target?.files?.[0];
-        if (!file)
+    const handleVideoChange = async () => {
+        const files = videoRef.current?.files;
+        if (!files)
             return;
         /**
          * TODO: Insert video component

package/dist/components/editor/simple_editor/navbar.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 export interface EditorBarProps {
-    handleUploadImage: (dataURL: File) => Promise<string>;
+    handleUploadImage: (files: FileList) => Promise<string>;
 }
 export declare const EditorBar: ({ handleUploadImage }: EditorBarProps) => React.JSX.Element;
 export declare const MenuButton: import("styled-components").IStyledComponent<"web", "button", {

package/dist/components/editor/simple_editor/navbar.js

@@ -23,11 +23,11 @@ export const EditorBar = ({ handleUploadImage }) => {
         nodeType: ELEMENT_UL,
     });
     const { props: { pressed: currUnorderedList, onClick: handleUnorderedList }, } = useListToolbarButton(unorderedListState);
-    const handleImageChange = async (event) => {
-        const file = event.target?.files?.[0];
-        if (!file)
+    const handleImageChange = async () => {
+        const files = imageRef.current?.files;
+        if (!files)
             return;
-        const imageurl = await handleUploadImage(file);
+        const imageurl = await handleUploadImage(files);
         if (imageurl) {
             insertImage(editorRef, imageurl);
         }

package/dist/components/editor/simple_editor/simple_editor.d.ts

@@ -3,7 +3,7 @@ import { TElement } from '@udecode/plate';
 export interface SimpleEditorProps {
     communityName: string;
     editable: boolean;
-    handleUploadImage: (dataURL: File) => Promise<string>;
+    handleUploadImage: (files: FileList) => Promise<string>;
     onChange: (newNodes: TElement[]) => void;
     placeholder?: string;
 }

package/dist/components/editor/simple_editor/simple_editor.js

@@ -27,6 +27,8 @@ export const SimpleEditor = ({ editable, handleUploadImage, onChange, placeholde
 };
 const InnerWrapper = styled.div `
   padding: 24px;
+  min-height: 224px;
+  box-sizing: border-box;
 `;
 const Wrapper = styled.div `
   position: relative;

package/dist/components/input/text_input/text_input.js

@@ -7,13 +7,6 @@ export const TextInput = ({ bg = 'var(--color-blue-10)', disabled, helperText, i
     const id = React.useId();
     const isMultiple = multiple;
     const [multipleValueToAdd, setMultipleValueToAdd] = React.useState('');
-    /**
-     * @todo make multiple wrapper a form
-     * on enter set multiple change and clear local value
-     * use local value to be text box
-     * have text box be flex shrink competing with chips
-     *
-     */
     const handleMultipleValueToAdd = (event) => {
         setMultipleValueToAdd(event.target.value);
     };
@@ -29,6 +22,10 @@ export const TextInput = ({ bg = 'var(--color-blue-10)', disabled, helperText, i
             onMultipleChange(value.slice(0, value.length - 1));
         }
     };
+    /**
+     * when a user presses enter (submit) add the input to the values
+     * but don't add the same value twice
+     */
     const handleMultipleAdd = (event) => {
         event.stopPropagation();
         event.preventDefault();
@@ -38,6 +35,9 @@ export const TextInput = ({ bg = 'var(--color-blue-10)', disabled, helperText, i
         }
         setMultipleValueToAdd('');
     };
+    /**
+     * when the user clicks on the chip to remove it, remove it from the value
+     */
     const handleMultipleItemRemoval = (removalItem) => {
         onMultipleChange &&
             onMultipleChange(value.filter((item) => item !== removalItem));

package/package.json

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