@soul-refiner/design-system 2.13.4 → 2.13.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/card/person/person.js +23 -1
- package/dist/components/iconography/icon/icon.js +1 -1
- package/dist/components/surfaces/comment/comment.js +11 -2
- package/dist/icons/time/hourglass.js +1 -0
- package/dist/src/components/card/person/person.d.ts +4 -2
- package/dist/src/components/surfaces/comment/comment.d.ts +2 -1
- package/dist/src/icons/time/hourglass.d.ts +3 -0
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
"use strict";var React=require("react"),Image=require("next/image"),styled=require("styled-components"),box=require("../../atoms/box/box.js"),button=require("../../actions/button/button.js"),dropdown=require("../../actions/dropdown/dropdown.js"),heading=require("../../atoms/typography/heading.js"),paragraph=require("../../atoms/typography/paragraph.js"),ellipsis_horizontal=require("../../../icons/basic/ellipsis_horizontal.js"),ispaid=require("../../iconography/avatar/icons/ispaid.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),Image__default=_interopDefaultCompat(Image);const PersonCard=({actions:e,chip:t,dotsActions:a,href:
|
|
2
|
+
"use strict";var React=require("react"),Image=require("next/image"),styled=require("styled-components"),box=require("../../atoms/box/box.js"),button=require("../../actions/button/button.js"),dropdown=require("../../actions/dropdown/dropdown.js"),heading=require("../../atoms/typography/heading.js"),paragraph=require("../../atoms/typography/paragraph.js"),ellipsis_horizontal=require("../../../icons/basic/ellipsis_horizontal.js"),ispaid=require("../../iconography/avatar/icons/ispaid.js"),material=require("@mui/material"),hourglass=require("../../../icons/time/hourglass.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),Image__default=_interopDefaultCompat(Image);const PersonCard=({actions:e,chip:t,dotsActions:a,href:l,image:r,subtitle:i,sx:o,title:n,isPaidUser:d,progress:s,lastOnline:u})=>React__default.default.createElement(Wrapper,{$image:r},React__default.default.createElement(Person,{$sx:o},React__default.default.createElement(ContentWrapper,{as:l?"a":"div",href:l},a&&!!a.length&&React__default.default.createElement(dropdown.Dropdown,{containerSx:"",hasArrow:!0,maintainState:!1,onClick:e=>e.preventDefault(),options:a,sx:"position: absolute; top: 8px; right: 8px; z-index: 24; display: none;",trigger:React__default.default.createElement(button.Button,{className:"icon",icon:React__default.default.createElement(ellipsis_horizontal.EllipsisHorizontal,null),onClick:e=>e.stopPropagation(),showChevron:!1,size:"small",type:"outlined"})}),React__default.default.createElement(Image__default.default,{alt:"",height:400,quality:100,src:r,width:312})),t&&React__default.default.createElement(box.Box,{sx:"position: absolute; top: 8px; left: 8px; z-index: 24;"},t),React__default.default.createElement(Figcaption,null,React__default.default.createElement(box.Box,{$display:"flex",$dir:"row",$gap:8},React__default.default.createElement(heading.H,{as:"span",$bold:!0,$color:"white",$fontSize:24,$lineHeight:36},n),d&&React__default.default.createElement(box.Box,{sx:"padding: .6rem 0 0 0; width: 18.33px; height: 18.33px;"},React__default.default.createElement(ispaid.IsPaid,null))),i&&React__default.default.createElement(paragraph.P,{as:"span",$color:"white",$fontSize:14,$lineHeight:20},i),(s||u)&&React__default.default.createElement(ProgressContainer,null,s&&React__default.default.createElement(React__default.default.Fragment,null,React__default.default.createElement(material.CircularProgress,{variant:"determinate",value:s,style:{color:"green",width:18,height:18}}),React__default.default.createElement(ProgressDataContainer,null,React__default.default.createElement(paragraph.P,{$fontSize:10,$color:"grey-9",$lineHeight:14},"Progress"),React__default.default.createElement(paragraph.P,{$fontSize:10,$color:"white",$bold:!0,$lineHeight:14},s,"%"))),u&&React__default.default.createElement(LastOnlineContainer,{$addMarginLeft:!!s},React__default.default.createElement(hourglass.Hourglass,null),React__default.default.createElement(LastOnlineDataContainer,null,React__default.default.createElement(paragraph.P,{$fontSize:10,$color:"grey-9",$lineHeight:14},"Last online"),React__default.default.createElement(paragraph.P,{$fontSize:10,$color:"white",$bold:!0,$lineHeight:14},u)))),e&&React__default.default.createElement(box.Box,{$display:"flex",$dir:"row",$gap:8,sx:"margin-top: 16px;"},React__default.default.Children.toArray(e))))),ContentWrapper=styled.styled.div`
|
|
3
3
|
display: flex;
|
|
4
4
|
flex-direction: column;
|
|
5
5
|
&:hover > div {
|
|
@@ -50,4 +50,26 @@
|
|
|
50
50
|
padding: 16px 24px;
|
|
51
51
|
box-shadow: 0 -10px 20px 0 rgba(0, 0, 0, 0.001);
|
|
52
52
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
53
|
+
`,ProgressContainer=styled.styled.div`
|
|
54
|
+
display: flex;
|
|
55
|
+
margin-top: 8px;
|
|
56
|
+
align-items: center;
|
|
57
|
+
`,ProgressDataContainer=styled.styled.div`
|
|
58
|
+
display: flex;
|
|
59
|
+
flex-direction: column;
|
|
60
|
+
margin-left: 4px;
|
|
61
|
+
`,LastOnlineContainer=styled.styled.div`
|
|
62
|
+
display: flex;
|
|
63
|
+
align-items: center;
|
|
64
|
+
|
|
65
|
+
${({$addMarginLeft:e})=>e&&`
|
|
66
|
+
margin-left: auto;
|
|
67
|
+
padding-left: 16px;
|
|
68
|
+
border-left: 1px solid var(--color-grey-5);
|
|
69
|
+
margin-right: 40px;
|
|
70
|
+
`};
|
|
71
|
+
`,LastOnlineDataContainer=styled.styled.div`
|
|
72
|
+
display: flex;
|
|
73
|
+
flex-direction: column;
|
|
74
|
+
margin-left: 4px;
|
|
53
75
|
`;exports.PersonCard=PersonCard;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
"use strict";var React=require("react"),styled=require("styled-components"),colors=require("../../../common/colors.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const Icon=({as:e,children:t,color:o="grey-3",size:r=16,sx:c,...s})=>React__default.default.createElement(SVG,{as:e,width:r,height:r,viewBox
|
|
2
|
+
"use strict";var React=require("react"),styled=require("styled-components"),colors=require("../../../common/colors.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const Icon=({as:e,children:t,color:o="grey-3",size:r=16,sx:c,...s})=>React__default.default.createElement(SVG,{as:e,width:r,height:r,viewBox:`0 0 ${r} `+r,fill:colors.colorReference[o],xmlns:"http://www.w3.org/2000/svg",$sx:c,...s},t),SVG=styled.styled.svg`
|
|
3
3
|
${({$sx:e})=>e||""}
|
|
4
4
|
`;exports.Icon=Icon;
|
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
"use strict";var React=require("react"),styled=require("styled-components"),Link=require("next/link"),Picker=require("@emoji-mart/react"),emojis=require("../../../emoji/emojis.json.js"),avatar=require("../../iconography/avatar/avatar.js"),box=require("../../atoms/box/box.js"),highlighter=require("../../atoms/highlighter/highlighter.js"),paragraph=require("../../atoms/typography/paragraph.js"),button=require("../../actions/button/button.js"),portal=require("../portal/portal.js"),regex=require("../../../common/regex.js"),styles=require("../../../common/styles.js"),emoticon_add=require("../../../icons/basic/emoticon_add.js"),comment=require("../../../icons/message/comment.js"),helpers=require("./helpers.js"),responsive_text_area=require("../../input/responsive-text_area/responsive_text_area.js"),send_text=require("../../../icons/email/send_text.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),styled__default=_interopDefaultCompat(styled),Link__default=_interopDefaultCompat(Link),Picker__default=_interopDefaultCompat(Picker);const MAX_REACTIONS_SHOWN=5,Comment=({avatarTooltipContent:e,avatarTooltipSx:t,content:a,createdDate:r,hasMoreReplies:l,id:o,onComment:n,onReact:i,onShowReplies:
|
|
2
|
+
"use strict";var React=require("react"),styled=require("styled-components"),Link=require("next/link"),Picker=require("@emoji-mart/react"),emojis=require("../../../emoji/emojis.json.js"),avatar=require("../../iconography/avatar/avatar.js"),box=require("../../atoms/box/box.js"),highlighter=require("../../atoms/highlighter/highlighter.js"),paragraph=require("../../atoms/typography/paragraph.js"),button=require("../../actions/button/button.js"),portal=require("../portal/portal.js"),regex=require("../../../common/regex.js"),styles=require("../../../common/styles.js"),emoticon_add=require("../../../icons/basic/emoticon_add.js"),comment=require("../../../icons/message/comment.js"),helpers=require("./helpers.js"),responsive_text_area=require("../../input/responsive-text_area/responsive_text_area.js"),send_text=require("../../../icons/email/send_text.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),styled__default=_interopDefaultCompat(styled),Link__default=_interopDefaultCompat(Link),Picker__default=_interopDefaultCompat(Picker);const MAX_REACTIONS_SHOWN=5,Comment=({avatarTooltipContent:e,avatarTooltipSx:t,content:a,createdDate:r,hasMoreReplies:l,id:o,onComment:n,onReact:i,onShowReplies:u,onEdit:d,isEditing:c,setIsEditing:s,dropdown:p,reactionModal:f,reactions:_,replies:m,userImageUri:x,userName:g,userReactions:R,visibilityIcon:h,customPlaceHolder:y,userProfileUri:b,sx:v,moveButtonsToLeft:$=!1})=>{const[E,k]=React__default.default.useState(!1),[C,T]=React__default.default.useState({x:0,y:0}),[I,A]=React__default.default.useState("up"),[D,O]=React__default.default.useState(!1),[w,H]=React__default.default.useState(!1),[j,S]=React__default.default.useState(""),[q,P]=React__default.default.useState(a),W=React__default.default.useRef(null),B=React__default.default.Children.toArray(m);React__default.default.useEffect(()=>{c&&W.current&&W.current.focus()},[c]);var m=e=>{e.stopPropagation(),k(e=>!e),T({y:e.clientY,x:e.clientX}),A(400<e.clientY?"up":"down")},L=()=>{u&&u(),H(!0)},r=helpers.abbrTimeBeforeDate(r),_=_&&Object.entries(_).slice(0,MAX_REACTIONS_SHOWN).sort((e,t)=>e[1]<t[1]?1:-1).map(e=>React__default.default.createElement(Reaction,{key:o+e[0],onClick:()=>i(e[0]),$align:"center",$dir:"row",$gap:5,$userSelected:R?.includes(e[0])},e[0],React__default.default.createElement(paragraph.P,{$bold:!0,$fontSize:10,$lineHeight:14},e[1]))),z=!!B?.length&&0<B.length,N=z&&B.map((e,t)=>{var a;return React__default.default.isValidElement(e)?(a=e.props?.id,t=t!==B.length-1||l,React__default.default.createElement(ReplyWrapper,{$hasLine:t,key:a},e,React__default.default.createElement(ReplyIndicator,null))):null});return React__default.default.createElement(Wrapper,{$sx:v,id:"comment-"+o,$moveButtonsToLeft:$},React__default.default.createElement(avatar.Avatar,{as:Link__default.default,href:b,image:x,size:32,tooltipContent:e,tooltipSx:t}),React__default.default.createElement(box.Box,{$flex:1,$dir:"column"},React__default.default.createElement(ContentWrapper,{$hasReplies:z||!!l},c?React__default.default.createElement(responsive_text_area.ResponsiveTextArea,{inputStyles:"min-height: 104px;",wrapperStyles:"background:var(--color-grey-9); ",onChange:e=>{P(e.target.value)},value:q,ref:W}):React__default.default.createElement(CommentBox,null,React__default.default.createElement(box.Box,{$dir:"row",$justify:"space-between",$align:"center"},React__default.default.createElement(paragraph.P,{as:b?Link__default.default:"span",href:b,$bold:!0,$color:"grey-2",sx:"text-decoration:none !important; color:var(--color-grey-2) !important;",$fontSize:14,$lineHeight:20},g),p),React__default.default.createElement(paragraph.P,{sx:"white-space: pre-line;letter-spacing: -0.176px; word-break: break-word;"},React__default.default.createElement(highlighter.Highlighter,{highlightRender:e=>React__default.default.createElement(paragraph.P,{as:"span",$color:"primary-blue-2"},React__default.default.createElement(Link__default.default,{href:e,target:"_blank"},e)),seperator:regex.URL_REGEX,text:a}))),React__default.default.createElement(box.Box,{$align:"flex-start",$dir:"row",$display:"flex",$gap:16,sx:"margin: 8px 0px; position: relative;"},c?React__default.default.createElement(box.Box,{$display:"flex",$align:"center",$justify:"space-between",$gap:6,sx:"margin-top: 8px; width: 100%;"},React__default.default.createElement(emoticon_add.Emoticon,{color:"primary-blue-2",onClick:m,size:24,sx:`cursor: pointer; flex-shrink: 0;
|
|
3
|
+
${!$&&"margin-right: auto;"}
|
|
4
|
+
`}),React__default.default.createElement(button.Button,{onClick:()=>{s&&s(!c),P(a)},sx:`background-color: transparent; border: none; box-shadow: none; color: var(--color-primary-blue-2);
|
|
5
|
+
${$?"margin-left: 20px;":"margin-left: auto;"}
|
|
6
|
+
&:hover, &:focus {
|
|
7
|
+
border: none;
|
|
8
|
+
outline: none;
|
|
9
|
+
}
|
|
10
|
+
`,size:"small",type:"outlined"},"Cancel"),React__default.default.createElement(button.Button,{onClick:()=>{d&&d(q,o),s&&s(!1)},size:"small",type:"primary"},"Save")):React__default.default.createElement(React__default.default.Fragment,null,React__default.default.createElement(emoticon_add.Emoticon,{color:"primary-blue-2",onClick:m,size:24,sx:" cursor: pointer; flex-shrink: 0;"}),React__default.default.createElement(comment.Comment,{color:"primary-blue-2",onClick:()=>O(e=>!e),size:24,sx:"border-radius: 50%; cursor: pointer; flex-shrink: 0;"}),React__default.default.createElement(paragraph.P,{$color:"grey-7"},"•"),React__default.default.createElement(paragraph.P,{$color:"grey-4",$fontSize:12,$lineHeight:24,sx:"flex-shrink: 0;"},r),React__default.default.createElement(box.Box,{$display:"flex",$flow:"row wrap",$gap:6,sx:"max-width: calc(100% - 190px); margin-left: auto;"},_,f)),E&&React__default.default.createElement(portal.Portal,null,React__default.default.createElement(PickerWrapper,{$pickerOrientation:I,$top:C.y,$left:C.x},React__default.default.createElement(Picker__default.default,{data:emojis.default,onEmojiSelect:({native:e})=>{i(e),k(!1)},onClickOutside:()=>k(!1),maxFrequentRows:1,navPosition:"none",previewPosition:"none",perLine:9,theme:"auto"}))))),z&&w&&React__default.default.createElement(RepliesWrapper,null,N),!w&&!l&&z&&React__default.default.createElement(RepliesWrapper,null,React__default.default.createElement(ReplyWrapper,{$hasLine:!1},React__default.default.createElement(button.Button,{onClick:L,size:"small",sx:"color: var(--color-grey-3);",type:"text"},"show replies"),React__default.default.createElement(ReplyIndicator,null))),l&&React__default.default.createElement(RepliesWrapper,null,React__default.default.createElement(ReplyWrapper,{$hasLine:!1},React__default.default.createElement(button.Button,{onClick:L,size:"small",sx:"color: var(--color-grey-3);",type:"text"},"show more replies"),React__default.default.createElement(ReplyIndicator,null))),D&&React__default.default.createElement(CommentWrapper,null,React__default.default.createElement(responsive_text_area.ResponsiveTextArea,{bg:"var(--color-grey-10)",value:j,onChange:e=>{S(e.target.value)},placeholder:y||"Write a reply",maxCharacters:1e3,wrapperStyles:"margin: 16px 0; width: 100%;",actionComponent:React__default.default.createElement(box.Box,{sx:"margin: auto 0 5px 0px;",$align:"center",$justify:"center",$gap:8},h,React__default.default.createElement(button.Button,{disabled:!j.length,icon:React__default.default.createElement(send_text.SendText,null),onClick:e=>{e.stopPropagation(),e.preventDefault(),n(j),S("")},sx:`
|
|
3
11
|
justify-content: center;
|
|
4
12
|
background-color: var(--color-primary-blue-2);
|
|
5
13
|
align-items: center;
|
|
@@ -24,9 +32,10 @@
|
|
|
24
32
|
flex-direction: row;
|
|
25
33
|
align-items: flex-start;
|
|
26
34
|
gap: 12px;
|
|
27
|
-
justify-content: space-between;
|
|
28
35
|
position: relative;
|
|
29
36
|
${({$sx:e})=>e||""}
|
|
37
|
+
|
|
38
|
+
${({$moveButtonsToLeft:e})=>e?"justify-content: flex-start;":"justify-content: space-between;"}
|
|
30
39
|
`,ContentWrapper=styled__default.default.div`
|
|
31
40
|
display: flex;
|
|
32
41
|
word-break: break-word;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";var React=require("react"),icon=require("../../components/iconography/icon/icon.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const Hourglass=e=>React__default.default.createElement(icon.Icon,{size:20,...e},React__default.default.createElement("path",{d:"M5.6877 18.1252H14.3119C15.0854 18.1252 15.7006 17.4889 15.6174 16.7557C15.0803 12.0315 11.8748 12.1096 11.8748 10.0002C11.8748 7.89087 15.1213 8.00806 15.617 3.24478C15.6951 2.51118 15.0854 1.87524 14.3119 1.87524H5.6877C4.91426 1.87524 4.30606 2.51118 4.38262 3.24478C4.87832 8.00806 8.12481 7.85181 8.12481 10.0002C8.12481 12.1487 4.91934 12.0315 4.38262 16.7557C4.29903 17.4889 4.91426 18.1252 5.6877 18.1252Z",stroke:"#FAC70A",strokeWidth:"1.25",strokeLinecap:"round",strokeLinejoin:"round"}),React__default.default.createElement("path",{d:"M13.41 16.8752H6.60651C5.99714 16.8752 5.82526 16.1721 6.25261 15.7362C7.28698 14.6877 9.37487 13.937 9.37487 12.7346V8.75024C9.37487 7.97485 7.8905 7.38306 6.97214 6.12524C6.82058 5.91782 6.83581 5.62524 7.22097 5.62524H12.7964C13.1249 5.62524 13.196 5.91548 13.0464 6.12329C12.1413 7.38306 10.6249 7.97095 10.6249 8.75024V12.7346C10.6249 13.9272 12.801 14.5706 13.7655 15.7374C14.1542 16.2077 14.0182 16.8752 13.41 16.8752Z",fill:"#FAC70A"}));exports.Hourglass=Hourglass;
|
|
@@ -6,9 +6,11 @@ export interface PersonCardProps {
|
|
|
6
6
|
dotsActions?: (Omit<DropdownOptionProps, 'selected'> | 'break')[];
|
|
7
7
|
href: string;
|
|
8
8
|
image: string;
|
|
9
|
-
subtitle
|
|
9
|
+
subtitle?: string | React.ReactElement;
|
|
10
10
|
sx?: string;
|
|
11
11
|
title: string;
|
|
12
12
|
isPaidUser?: boolean;
|
|
13
|
+
progress?: number;
|
|
14
|
+
lastOnline?: string;
|
|
13
15
|
}
|
|
14
|
-
export declare const PersonCard: ({ actions, chip, dotsActions, href, image, subtitle, sx, title, isPaidUser, }: PersonCardProps) => React.JSX.Element;
|
|
16
|
+
export declare const PersonCard: ({ actions, chip, dotsActions, href, image, subtitle, sx, title, isPaidUser, progress, lastOnline, }: PersonCardProps) => React.JSX.Element;
|
|
@@ -24,5 +24,6 @@ export interface CommentProps {
|
|
|
24
24
|
userReactions?: string[];
|
|
25
25
|
userProfileUri: string;
|
|
26
26
|
sx?: string;
|
|
27
|
+
moveButtonsToLeft?: boolean;
|
|
27
28
|
}
|
|
28
|
-
export declare const Comment: ({ avatarTooltipContent, avatarTooltipSx, content, createdDate, hasMoreReplies, id, onComment, onReact, onShowReplies, onEdit, isEditing, setIsEditing, dropdown, reactionModal, reactions, replies, userImageUri, userName, userReactions, visibilityIcon, customPlaceHolder, userProfileUri, sx, }: CommentProps) => React.JSX.Element;
|
|
29
|
+
export declare const Comment: ({ avatarTooltipContent, avatarTooltipSx, content, createdDate, hasMoreReplies, id, onComment, onReact, onShowReplies, onEdit, isEditing, setIsEditing, dropdown, reactionModal, reactions, replies, userImageUri, userName, userReactions, visibilityIcon, customPlaceHolder, userProfileUri, sx, moveButtonsToLeft, }: CommentProps) => React.JSX.Element;
|