@soul-refiner/design-system 2.13.5 → 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.
|
@@ -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;
|
|
@@ -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;
|