@cgi-learning-hub/ui 1.3.5-dev.1738162166 → 1.3.5-dev.1738163256
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 +1 @@
|
|
|
1
|
-
"use strict";const r=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";const r=require("react/jsx-runtime"),d=require("@mui/material"),m=require("../../createSvgIcon-DestgQu_.cjs"),o=require("./style.cjs.js"),b=require("../EllipsisWithTooltip/EllipsisWithTooltip.cjs.js"),j=m.createSvgIcon(r.jsx("path",{d:"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2m0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2"}),"MoreVert"),g=({isSelected:l=!1,onSelect:x=()=>{},image:u,title:n,defaultImage:h,propertyItems:i=[],infoIcons:s=[],size:t="md",width:p,onClick:c=()=>{}})=>(s=s.slice(0,3),r.jsx(d.Box,{sx:{width:p&&t==="md"?p:"320px"},children:r.jsxs(o.StyledCard,{selected:l,size:t,onClick:c,onKeyDown:e=>{(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),c==null||c())},role:"button",tabIndex:0,"aria-label":`Resource card for ${n}`,children:[r.jsx(o.SelectedIcon,{onClick:e=>{e.preventDefault(),e.stopPropagation(),x()},onKeyDown:e=>{(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),e.stopPropagation(),x())},className:"selected-icon",selected:l,role:"button",tabIndex:0,"aria-label":l?"Unselect card":"Select card",children:r.jsx(j,{})}),r.jsx(d.Stack,{sx:{width:t=="sm"?110:"100%",display:"flex",alignItems:"center",justifyContent:"center",boxSizing:"border-box"},children:r.jsx(o.ResourceCardImage,{image:u,defaultImage:h,size:t,role:"img","aria-label":`Image for ${n}`})}),r.jsxs(o.ResourceCardBody,{size:t,children:[r.jsx(b,{typographyProps:{fontWeight:"700",fontSize:"1.1rem"},tooltipProps:{placement:"bottom",arrow:!0},children:n}),i.length>0&&i.map((e,a)=>r.jsxs(o.ResourcePropertyItem,{size:t,role:"group","aria-label":`Property ${a}`,children:[e.icon,r.jsx(o.ResourcePropertyText,{isLast:a===i.length-1,size:t,width:p,children:e.text})]},`property-${a}`)),r.jsx(o.PublicIconWrapper,{size:t,children:s.length>0&&s.map((e,a)=>r.jsx(d.Tooltip,{title:e.text,placement:"top",arrow:!0,children:r.jsx(o.ResourceIconItem,{size:t,role:"button",tabIndex:0,"aria-label":e.text,children:e.icon})},`info-${a}`))})]})]})}));module.exports=g;
|
|
@@ -1,30 +1,29 @@
|
|
|
1
|
-
import { jsx as r, jsxs as
|
|
2
|
-
import {
|
|
1
|
+
import { jsx as r, jsxs as i } from "react/jsx-runtime";
|
|
2
|
+
import { Box as h, Stack as b, Tooltip as x } from "@mui/material";
|
|
3
3
|
import { c as f } from "../../createSvgIcon-C9kh-71a.js";
|
|
4
|
-
import { StyledCard as g, SelectedIcon as y, ResourceCardImage as
|
|
5
|
-
import
|
|
6
|
-
const
|
|
4
|
+
import { StyledCard as g, SelectedIcon as y, ResourceCardImage as P, ResourceCardBody as R, ResourcePropertyItem as I, ResourcePropertyText as D, PublicIconWrapper as $, ResourceIconItem as v } from "./style.es.js";
|
|
5
|
+
import w from "../EllipsisWithTooltip/EllipsisWithTooltip.es.js";
|
|
6
|
+
const S = f(/* @__PURE__ */ r("path", {
|
|
7
7
|
d: "M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2m0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2"
|
|
8
|
-
}), "MoreVert"),
|
|
8
|
+
}), "MoreVert"), B = ({
|
|
9
9
|
isSelected: c = !1,
|
|
10
|
-
onSelect:
|
|
10
|
+
onSelect: m = () => {
|
|
11
11
|
},
|
|
12
|
-
image:
|
|
12
|
+
image: s,
|
|
13
13
|
title: n,
|
|
14
14
|
defaultImage: u,
|
|
15
15
|
propertyItems: p = [],
|
|
16
16
|
infoIcons: a = [],
|
|
17
17
|
size: t = "md",
|
|
18
|
-
width:
|
|
18
|
+
width: d,
|
|
19
19
|
onClick: l = () => {
|
|
20
20
|
}
|
|
21
|
-
}) => (a = a.slice(0, 3), /* @__PURE__ */ d(
|
|
21
|
+
}) => (a = a.slice(0, 3), /* @__PURE__ */ r(h, { sx: { width: d && t === "md" ? d : "320px" }, children: /* @__PURE__ */ i(
|
|
22
22
|
g,
|
|
23
23
|
{
|
|
24
24
|
selected: c,
|
|
25
25
|
size: t,
|
|
26
26
|
onClick: l,
|
|
27
|
-
width: s,
|
|
28
27
|
onKeyDown: (e) => {
|
|
29
28
|
(e.key === "Enter" || e.key === " ") && (e.preventDefault(), l == null || l());
|
|
30
29
|
},
|
|
@@ -36,50 +35,50 @@ const w = f(/* @__PURE__ */ r("path", {
|
|
|
36
35
|
y,
|
|
37
36
|
{
|
|
38
37
|
onClick: (e) => {
|
|
39
|
-
e.preventDefault(), e.stopPropagation(),
|
|
38
|
+
e.preventDefault(), e.stopPropagation(), m();
|
|
40
39
|
},
|
|
41
40
|
onKeyDown: (e) => {
|
|
42
|
-
(e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(),
|
|
41
|
+
(e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(), m());
|
|
43
42
|
},
|
|
44
43
|
className: "selected-icon",
|
|
45
44
|
selected: c,
|
|
46
45
|
role: "button",
|
|
47
46
|
tabIndex: 0,
|
|
48
47
|
"aria-label": c ? "Unselect card" : "Select card",
|
|
49
|
-
children: /* @__PURE__ */ r(
|
|
48
|
+
children: /* @__PURE__ */ r(S, {})
|
|
50
49
|
}
|
|
51
50
|
),
|
|
52
|
-
/* @__PURE__ */ r(
|
|
51
|
+
/* @__PURE__ */ r(b, { sx: {
|
|
53
52
|
width: t == "sm" ? 110 : "100%",
|
|
54
53
|
display: "flex",
|
|
55
54
|
alignItems: "center",
|
|
56
55
|
justifyContent: "center",
|
|
57
56
|
boxSizing: "border-box"
|
|
58
57
|
}, children: /* @__PURE__ */ r(
|
|
59
|
-
|
|
58
|
+
P,
|
|
60
59
|
{
|
|
61
|
-
image:
|
|
60
|
+
image: s,
|
|
62
61
|
defaultImage: u,
|
|
63
62
|
size: t,
|
|
64
63
|
role: "img",
|
|
65
64
|
"aria-label": `Image for ${n}`
|
|
66
65
|
}
|
|
67
66
|
) }),
|
|
68
|
-
/* @__PURE__ */
|
|
69
|
-
|
|
67
|
+
/* @__PURE__ */ i(
|
|
68
|
+
R,
|
|
70
69
|
{
|
|
71
70
|
size: t,
|
|
72
71
|
children: [
|
|
73
72
|
/* @__PURE__ */ r(
|
|
74
|
-
|
|
73
|
+
w,
|
|
75
74
|
{
|
|
76
75
|
typographyProps: { fontWeight: "700", fontSize: "1.1rem" },
|
|
77
76
|
tooltipProps: { placement: "bottom", arrow: !0 },
|
|
78
77
|
children: n
|
|
79
78
|
}
|
|
80
79
|
),
|
|
81
|
-
p.length > 0 && p.map((e, o) => /* @__PURE__ */
|
|
82
|
-
|
|
80
|
+
p.length > 0 && p.map((e, o) => /* @__PURE__ */ i(
|
|
81
|
+
I,
|
|
83
82
|
{
|
|
84
83
|
size: t,
|
|
85
84
|
role: "group",
|
|
@@ -87,11 +86,11 @@ const w = f(/* @__PURE__ */ r("path", {
|
|
|
87
86
|
children: [
|
|
88
87
|
e.icon,
|
|
89
88
|
/* @__PURE__ */ r(
|
|
90
|
-
|
|
89
|
+
D,
|
|
91
90
|
{
|
|
92
91
|
isLast: o === p.length - 1,
|
|
93
92
|
size: t,
|
|
94
|
-
width:
|
|
93
|
+
width: d,
|
|
95
94
|
children: e.text
|
|
96
95
|
}
|
|
97
96
|
)
|
|
@@ -100,17 +99,17 @@ const w = f(/* @__PURE__ */ r("path", {
|
|
|
100
99
|
`property-${o}`
|
|
101
100
|
)),
|
|
102
101
|
/* @__PURE__ */ r(
|
|
103
|
-
|
|
102
|
+
$,
|
|
104
103
|
{
|
|
105
104
|
size: t,
|
|
106
105
|
children: a.length > 0 && a.map((e, o) => /* @__PURE__ */ r(
|
|
107
|
-
|
|
106
|
+
x,
|
|
108
107
|
{
|
|
109
108
|
title: e.text,
|
|
110
109
|
placement: "top",
|
|
111
110
|
arrow: !0,
|
|
112
111
|
children: /* @__PURE__ */ r(
|
|
113
|
-
|
|
112
|
+
v,
|
|
114
113
|
{
|
|
115
114
|
size: t,
|
|
116
115
|
role: "button",
|
|
@@ -129,7 +128,7 @@ const w = f(/* @__PURE__ */ r("path", {
|
|
|
129
128
|
)
|
|
130
129
|
]
|
|
131
130
|
}
|
|
132
|
-
));
|
|
131
|
+
) }));
|
|
133
132
|
export {
|
|
134
|
-
|
|
133
|
+
B as default
|
|
135
134
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("@mui/material"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("@mui/material"),i=t.styled(t.Card)(({theme:e,selected:o,size:r})=>({boxShadow:"0px 4px 12px rgba(0, 0, 0, 0.1), 0px 2px 4px rgba(0, 0, 0, 0.06)",borderRadius:"0.5rem",height:"auto",border:"2px solid transparent",transition:"border-color 0.2s ease-in-out",position:"relative",...r==="sm"&&{display:"flex",width:"100%"},...o&&{borderColor:e.palette.primary.light},"&:hover":{"& .MuiBox-root.selected-icon":{opacity:1,visibility:"visible"}}})),a=t.styled(t.Box)(({theme:e,selected:o})=>({position:"absolute",top:0,right:0,width:"2rem",height:"2rem",background:e.palette.common.white,display:"flex",justifyContent:"center",alignItems:"center",padding:".8rem",borderRadius:".5rem",visibility:"visible",opacity:0,cursor:"pointer",transition:"opacity 0.2s ease-in-out, visibility 0.2s ease-in-out",...o&&{background:e.palette.primary.lighter,opacity:1,visibility:"visible"},"&:hover, &:focus":{background:e.palette.primary.lighter,opacity:1},"& .MuiSvgIcon-root":{color:e.palette.primary.main}})),s=t.styled(t.CardMedia)(({size:e,image:o,defaultImage:r})=>({height:e=="sm"?85:180,width:e=="sm"?85:"calc(100% - 2rem)",objectFit:"cover",margin:e=="sm"?"0 10px":"1rem",borderRadius:"0.5rem",...!o&&e==="md"&&{backgroundImage:`url(${r})`,backgroundRepeat:"repeat",backgroundSize:"20% 20%",backgroundPosition:"center",opacity:"0.7"}})),n=t.styled(t.CardContent)(({size:e})=>({padding:e=="sm"?".7rem 5px .7rem 0 !important":"0 16px 16px 16px !important",width:e==="sm"?"calc(100% - 110px)":"100%"})),p=t.styled(t.Box)(({size:e})=>({display:"flex",alignItems:"center",marginTop:"0.5rem",...e==="sm"&&{svg:{width:".8em",height:".8em"}}})),c=t.styled(t.Box)(({size:e,width:o,isLast:r})=>({marginLeft:e==="sm"?".3rem":".5rem",fontSize:e==="sm"?"12px":"15px","& .MuiTypography-root":{paddingTop:"2px",fontSize:e==="sm"?"12px":"15px"},...r&&!o&&{textOverflow:"ellipsis",whiteSpace:"nowrap",overflow:"hidden",maxWidth:e==="sm"?"110px":"172px"}})),d=t.styled(t.Box)(({size:e})=>({display:"inline-flex",alignItems:"center",justifyContent:"center",width:"fit-content",height:"fit-content",...e==="sm"&&{svg:{width:".8em",height:".8em"}}})),l=t.styled(t.Box)(({size:e})=>({position:"absolute",bottom:e==="sm"?".65rem":"16px",right:e==="sm"?"8px":"16px",display:"flex",gap:".2rem"}));exports.PublicIconWrapper=l;exports.ResourceCardBody=n;exports.ResourceCardImage=s;exports.ResourceIconItem=d;exports.ResourcePropertyItem=p;exports.ResourcePropertyText=c;exports.SelectedIcon=a;exports.StyledCard=i;
|
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
import { styled as t, Card as
|
|
2
|
-
const c = t(
|
|
1
|
+
import { styled as t, Card as a, Box as r, CardMedia as p, CardContent as n } from "@mui/material";
|
|
2
|
+
const c = t(a)(({ theme: e, selected: o, size: i }) => ({
|
|
3
3
|
boxShadow: "0px 4px 12px rgba(0, 0, 0, 0.1), 0px 2px 4px rgba(0, 0, 0, 0.06)",
|
|
4
4
|
borderRadius: "0.5rem",
|
|
5
|
-
width: a && i === "md" ? a : "320px",
|
|
6
5
|
height: "auto",
|
|
7
6
|
border: "2px solid transparent",
|
|
8
7
|
transition: "border-color 0.2s ease-in-out",
|
|
@@ -20,7 +19,7 @@ const c = t(p)(({ theme: e, selected: o, size: i, width: a }) => ({
|
|
|
20
19
|
visibility: "visible"
|
|
21
20
|
}
|
|
22
21
|
}
|
|
23
|
-
})),
|
|
22
|
+
})), m = t(r)(({ theme: e, selected: o }) => ({
|
|
24
23
|
position: "absolute",
|
|
25
24
|
top: 0,
|
|
26
25
|
right: 0,
|
|
@@ -48,7 +47,7 @@ const c = t(p)(({ theme: e, selected: o, size: i, width: a }) => ({
|
|
|
48
47
|
"& .MuiSvgIcon-root": {
|
|
49
48
|
color: e.palette.primary.main
|
|
50
49
|
}
|
|
51
|
-
})),
|
|
50
|
+
})), d = t(p)(({ size: e, image: o, defaultImage: i }) => ({
|
|
52
51
|
height: e == "sm" ? 85 : 180,
|
|
53
52
|
width: e == "sm" ? 85 : "calc(100% - 2rem)",
|
|
54
53
|
objectFit: "cover",
|
|
@@ -61,10 +60,10 @@ const c = t(p)(({ theme: e, selected: o, size: i, width: a }) => ({
|
|
|
61
60
|
backgroundPosition: "center",
|
|
62
61
|
opacity: "0.7"
|
|
63
62
|
}
|
|
64
|
-
})),
|
|
63
|
+
})), l = t(n)(({ size: e }) => ({
|
|
65
64
|
padding: e == "sm" ? ".7rem 5px .7rem 0 !important" : "0 16px 16px 16px !important",
|
|
66
65
|
width: e === "sm" ? "calc(100% - 110px)" : "100%"
|
|
67
|
-
})),
|
|
66
|
+
})), g = t(r)(({ size: e }) => ({
|
|
68
67
|
display: "flex",
|
|
69
68
|
alignItems: "center",
|
|
70
69
|
marginTop: "0.5rem",
|
|
@@ -74,7 +73,7 @@ const c = t(p)(({ theme: e, selected: o, size: i, width: a }) => ({
|
|
|
74
73
|
height: ".8em"
|
|
75
74
|
}
|
|
76
75
|
}
|
|
77
|
-
})),
|
|
76
|
+
})), x = t(r)(({ size: e, width: o, isLast: i }) => ({
|
|
78
77
|
marginLeft: e === "sm" ? ".3rem" : ".5rem",
|
|
79
78
|
fontSize: e === "sm" ? "12px" : "15px",
|
|
80
79
|
"& .MuiTypography-root": {
|
|
@@ -87,7 +86,7 @@ const c = t(p)(({ theme: e, selected: o, size: i, width: a }) => ({
|
|
|
87
86
|
overflow: "hidden",
|
|
88
87
|
maxWidth: e === "sm" ? "110px" : "172px"
|
|
89
88
|
}
|
|
90
|
-
})),
|
|
89
|
+
})), u = t(r)(({ size: e }) => ({
|
|
91
90
|
display: "inline-flex",
|
|
92
91
|
alignItems: "center",
|
|
93
92
|
justifyContent: "center",
|
|
@@ -99,7 +98,7 @@ const c = t(p)(({ theme: e, selected: o, size: i, width: a }) => ({
|
|
|
99
98
|
height: ".8em"
|
|
100
99
|
}
|
|
101
100
|
}
|
|
102
|
-
})),
|
|
101
|
+
})), h = t(r)(({ size: e }) => ({
|
|
103
102
|
position: "absolute",
|
|
104
103
|
bottom: e === "sm" ? ".65rem" : "16px",
|
|
105
104
|
right: e === "sm" ? "8px" : "16px",
|
|
@@ -107,12 +106,12 @@ const c = t(p)(({ theme: e, selected: o, size: i, width: a }) => ({
|
|
|
107
106
|
gap: ".2rem"
|
|
108
107
|
}));
|
|
109
108
|
export {
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
109
|
+
h as PublicIconWrapper,
|
|
110
|
+
l as ResourceCardBody,
|
|
111
|
+
d as ResourceCardImage,
|
|
112
|
+
u as ResourceIconItem,
|
|
113
|
+
g as ResourcePropertyItem,
|
|
114
|
+
x as ResourcePropertyText,
|
|
115
|
+
m as SelectedIcon,
|
|
117
116
|
c as StyledCard
|
|
118
117
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cgi-learning-hub/ui",
|
|
3
|
-
"version": "1.3.5-dev.
|
|
3
|
+
"version": "1.3.5-dev.1738163256",
|
|
4
4
|
"private": false,
|
|
5
5
|
"author": "CGI Learning-hub Team",
|
|
6
6
|
"description": "@cgi-learning-hub/ui is an open-source React component library that implements UI for HUB's features",
|