@cgi-learning-hub/ui 1.3.5-dev.1738080904 → 1.3.5-dev.1738155719
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/ResourceCard/ResourceCard.cjs.js +1 -1
- package/dist/components/ResourceCard/ResourceCard.d.ts +1 -0
- package/dist/components/ResourceCard/ResourceCard.es.js +91 -84
- package/dist/components/ResourceCard/style.cjs.js +1 -1
- package/dist/components/ResourceCard/style.es.js +72 -20
- package/dist/components/stories/ResourceCard.stories.cjs.js +1 -1
- package/dist/components/stories/ResourceCard.stories.d.ts +1 -2
- package/dist/components/stories/ResourceCard.stories.es.js +19 -27
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),u=require("@mui/material"),b=require("react"),g=require("../../createSvgIcon-DestgQu_.cjs"),t=require("./style.cjs.js"),j=require("../EllipsisWithTooltip/EllipsisWithTooltip.cjs.js"),y=g.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"),R=b.forwardRef(({isSelected:l=!1,onSelect:p=()=>{},image:x,title:n,logo:h,propertyItems:i=[],infoIcons:s=[],size:o="md",width:d,onClick:c=()=>{}},m)=>(s=s.slice(0,3),r.jsx(u.Box,{ref:m,sx:{position:"relative",width:d&&o==="md"?d:"320px",height:"auto"},children:r.jsxs(t.StyledCard,{selected:l,size:o,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(t.SelectedIcon,{onClick:e=>{e.stopPropagation(),p()},onKeyDown:e=>{(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),p())},className:"selected-icon",selected:l,role:"button",tabIndex:0,"aria-label":l?"Unselect card":"Select card",children:r.jsx(y,{})}),r.jsx(u.Box,{sx:{width:o=="sm"?110:"100%",display:"flex",alignItems:"center",justifyContent:"center",boxSizing:"border-box"},children:r.jsx(t.ResourceCardImage,{image:x,logo:h,role:"img","aria-label":`Image for ${n}`})}),r.jsxs(t.ResourceCardBody,{size:o,children:[r.jsx(j,{typographyProps:{fontWeight:"700",fontSize:"1.1rem"},tooltipProps:{placement:"bottom",arrow:!0},children:n}),i.length>0&&i.map((e,a)=>r.jsxs(t.ResourcePropertyItem,{role:"group","aria-label":`Property ${a}`,children:[e.icon,r.jsx(t.ResourcePropertyText,{isLast:a===i.length-1,size:o,width:d,children:e.text})]},`property-${a}`)),r.jsx(t.PublicIconWrapper,{size:o,children:s.length>0&&s.map((e,a)=>r.jsx(u.Tooltip,{title:e.text,placement:"top",arrow:!0,children:r.jsx(t.ResourceIconItem,{role:"button",tabIndex:0,"aria-label":e.text,children:e.icon})},`info-${a}`))})]})]})})));exports.ResourceCard=R;
|
|
@@ -1,129 +1,136 @@
|
|
|
1
1
|
import { jsx as r, jsxs as d } from "react/jsx-runtime";
|
|
2
|
-
import { Box as
|
|
3
|
-
import { forwardRef as
|
|
4
|
-
import { c as
|
|
5
|
-
import { StyledCard as
|
|
6
|
-
import
|
|
7
|
-
const
|
|
2
|
+
import { Box as s, Tooltip as f } from "@mui/material";
|
|
3
|
+
import { forwardRef as x } from "react";
|
|
4
|
+
import { c as g } from "../../createSvgIcon-C9kh-71a.js";
|
|
5
|
+
import { StyledCard as y, SelectedIcon as R, ResourceCardImage as P, ResourceCardBody as I, ResourcePropertyItem as w, ResourcePropertyText as $, PublicIconWrapper as v, ResourceIconItem as D } from "./style.es.js";
|
|
6
|
+
import j from "../EllipsisWithTooltip/EllipsisWithTooltip.es.js";
|
|
7
|
+
const E = g(/* @__PURE__ */ r("path", {
|
|
8
8
|
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"
|
|
9
|
-
}), "MoreVert"),
|
|
10
|
-
isSelected:
|
|
11
|
-
onSelect:
|
|
9
|
+
}), "MoreVert"), V = x(({
|
|
10
|
+
isSelected: c = !1,
|
|
11
|
+
onSelect: m = () => {
|
|
12
12
|
},
|
|
13
|
-
image:
|
|
14
|
-
title:
|
|
15
|
-
|
|
13
|
+
image: h,
|
|
14
|
+
title: n,
|
|
15
|
+
logo: u,
|
|
16
|
+
propertyItems: i = [],
|
|
16
17
|
infoIcons: a = [],
|
|
17
18
|
size: t = "md",
|
|
18
|
-
width:
|
|
19
|
-
onClick:
|
|
19
|
+
width: p,
|
|
20
|
+
onClick: l = () => {
|
|
20
21
|
}
|
|
21
|
-
},
|
|
22
|
+
}, b) => (a = a.slice(0, 3), /* @__PURE__ */ r(s, { ref: b, sx: {
|
|
22
23
|
position: "relative",
|
|
23
|
-
width:
|
|
24
|
+
width: p && t === "md" ? p : "320px",
|
|
24
25
|
height: "auto"
|
|
25
26
|
}, children: /* @__PURE__ */ d(
|
|
26
|
-
|
|
27
|
+
y,
|
|
27
28
|
{
|
|
28
|
-
selected:
|
|
29
|
+
selected: c,
|
|
29
30
|
size: t,
|
|
30
|
-
onClick:
|
|
31
|
+
onClick: l,
|
|
31
32
|
onKeyDown: (e) => {
|
|
32
|
-
(e.key === "Enter" || e.key === " ") && (e.preventDefault(),
|
|
33
|
+
(e.key === "Enter" || e.key === " ") && (e.preventDefault(), l == null || l());
|
|
33
34
|
},
|
|
34
35
|
role: "button",
|
|
35
36
|
tabIndex: 0,
|
|
36
|
-
"aria-label": `Resource card for ${
|
|
37
|
+
"aria-label": `Resource card for ${n}`,
|
|
37
38
|
children: [
|
|
38
39
|
/* @__PURE__ */ r(
|
|
39
|
-
|
|
40
|
+
R,
|
|
40
41
|
{
|
|
41
42
|
onClick: (e) => {
|
|
42
|
-
e.stopPropagation(),
|
|
43
|
+
e.stopPropagation(), m();
|
|
43
44
|
},
|
|
44
45
|
onKeyDown: (e) => {
|
|
45
|
-
(e.key === "Enter" || e.key === " ") && (e.preventDefault(),
|
|
46
|
+
(e.key === "Enter" || e.key === " ") && (e.preventDefault(), m());
|
|
46
47
|
},
|
|
47
48
|
className: "selected-icon",
|
|
48
|
-
selected:
|
|
49
|
+
selected: c,
|
|
49
50
|
role: "button",
|
|
50
51
|
tabIndex: 0,
|
|
51
|
-
"aria-label":
|
|
52
|
-
children: /* @__PURE__ */ r(
|
|
52
|
+
"aria-label": c ? "Unselect card" : "Select card",
|
|
53
|
+
children: /* @__PURE__ */ r(E, {})
|
|
53
54
|
}
|
|
54
55
|
),
|
|
55
|
-
/* @__PURE__ */ r(
|
|
56
|
+
/* @__PURE__ */ r(s, { sx: {
|
|
56
57
|
width: t == "sm" ? 110 : "100%",
|
|
57
58
|
display: "flex",
|
|
58
59
|
alignItems: "center",
|
|
59
60
|
justifyContent: "center",
|
|
60
61
|
boxSizing: "border-box"
|
|
61
62
|
}, children: /* @__PURE__ */ r(
|
|
62
|
-
|
|
63
|
+
P,
|
|
63
64
|
{
|
|
64
|
-
image:
|
|
65
|
-
|
|
66
|
-
height: t == "sm" ? "calc(100% - 32px)" : 180,
|
|
67
|
-
width: t == "sm" ? "calc(100% - 32px)" : "calc(100% - 2rem)",
|
|
68
|
-
objectFit: "cover",
|
|
69
|
-
margin: t == "sm" ? 0 : "1rem",
|
|
70
|
-
borderRadius: "0.5rem"
|
|
71
|
-
},
|
|
65
|
+
image: h,
|
|
66
|
+
logo: u,
|
|
72
67
|
role: "img",
|
|
73
|
-
"aria-label": `Image for ${
|
|
68
|
+
"aria-label": `Image for ${n}`
|
|
74
69
|
}
|
|
75
70
|
) }),
|
|
76
|
-
/* @__PURE__ */ d(
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
71
|
+
/* @__PURE__ */ d(
|
|
72
|
+
I,
|
|
73
|
+
{
|
|
74
|
+
size: t,
|
|
75
|
+
children: [
|
|
76
|
+
/* @__PURE__ */ r(
|
|
77
|
+
j,
|
|
78
|
+
{
|
|
79
|
+
typographyProps: { fontWeight: "700", fontSize: "1.1rem" },
|
|
80
|
+
tooltipProps: { placement: "bottom", arrow: !0 },
|
|
81
|
+
children: n
|
|
82
|
+
}
|
|
83
|
+
),
|
|
84
|
+
i.length > 0 && i.map((e, o) => /* @__PURE__ */ d(
|
|
85
|
+
w,
|
|
86
|
+
{
|
|
87
|
+
role: "group",
|
|
88
|
+
"aria-label": `Property ${o}`,
|
|
89
|
+
children: [
|
|
90
|
+
e.icon,
|
|
91
|
+
/* @__PURE__ */ r(
|
|
92
|
+
$,
|
|
93
|
+
{
|
|
94
|
+
isLast: o === i.length - 1,
|
|
95
|
+
size: t,
|
|
96
|
+
width: p,
|
|
97
|
+
children: e.text
|
|
98
|
+
}
|
|
99
|
+
)
|
|
100
|
+
]
|
|
101
|
+
},
|
|
102
|
+
`property-${o}`
|
|
103
|
+
)),
|
|
104
|
+
/* @__PURE__ */ r(
|
|
105
|
+
v,
|
|
106
106
|
{
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
107
|
+
size: t,
|
|
108
|
+
children: a.length > 0 && a.map((e, o) => /* @__PURE__ */ r(
|
|
109
|
+
f,
|
|
110
|
+
{
|
|
111
|
+
title: e.text,
|
|
112
|
+
placement: "top",
|
|
113
|
+
arrow: !0,
|
|
114
|
+
children: /* @__PURE__ */ r(
|
|
115
|
+
D,
|
|
116
|
+
{
|
|
117
|
+
role: "button",
|
|
118
|
+
tabIndex: 0,
|
|
119
|
+
"aria-label": e.text,
|
|
120
|
+
children: e.icon
|
|
121
|
+
}
|
|
122
|
+
)
|
|
123
|
+
},
|
|
124
|
+
`info-${o}`
|
|
125
|
+
))
|
|
118
126
|
}
|
|
119
127
|
)
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
] })
|
|
128
|
+
]
|
|
129
|
+
}
|
|
130
|
+
)
|
|
124
131
|
]
|
|
125
132
|
}
|
|
126
133
|
) })));
|
|
127
134
|
export {
|
|
128
|
-
|
|
135
|
+
V as ResourceCard
|
|
129
136
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
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",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,logo: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,19 +1,16 @@
|
|
|
1
|
-
import { styled as t, Card as
|
|
2
|
-
const
|
|
3
|
-
display: "flex",
|
|
4
|
-
marginTop: "0.5rem"
|
|
5
|
-
}, l = t(e)(({ theme: i, selected: o, size: r }) => ({
|
|
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 }) => ({
|
|
6
3
|
boxShadow: "0px 4px 12px rgba(0, 0, 0, 0.1), 0px 2px 4px rgba(0, 0, 0, 0.06)",
|
|
7
4
|
borderRadius: "0.5rem",
|
|
8
5
|
border: "2px solid transparent",
|
|
9
6
|
transition: "border-color 0.2s ease-in-out",
|
|
10
7
|
position: "relative",
|
|
11
|
-
...
|
|
8
|
+
...i === "sm" && {
|
|
12
9
|
display: "flex",
|
|
13
10
|
width: "100%"
|
|
14
11
|
},
|
|
15
12
|
...o && {
|
|
16
|
-
borderColor:
|
|
13
|
+
borderColor: e.palette.primary.light
|
|
17
14
|
},
|
|
18
15
|
"&:hover": {
|
|
19
16
|
"& .MuiBox-root.selected-icon": {
|
|
@@ -21,13 +18,13 @@ const s = {
|
|
|
21
18
|
visibility: "visible"
|
|
22
19
|
}
|
|
23
20
|
}
|
|
24
|
-
})),
|
|
21
|
+
})), m = t(r)(({ theme: e, selected: o }) => ({
|
|
25
22
|
position: "absolute",
|
|
26
23
|
top: 0,
|
|
27
24
|
right: 0,
|
|
28
25
|
width: "2rem",
|
|
29
26
|
height: "2rem",
|
|
30
|
-
background:
|
|
27
|
+
background: e.palette.common.white,
|
|
31
28
|
display: "flex",
|
|
32
29
|
justifyContent: "center",
|
|
33
30
|
alignItems: "center",
|
|
@@ -38,27 +35,82 @@ const s = {
|
|
|
38
35
|
cursor: "pointer",
|
|
39
36
|
transition: "opacity 0.2s ease-in-out, visibility 0.2s ease-in-out",
|
|
40
37
|
...o && {
|
|
41
|
-
background:
|
|
38
|
+
background: e.palette.primary.lighter,
|
|
42
39
|
opacity: 1,
|
|
43
40
|
visibility: "visible"
|
|
44
41
|
},
|
|
45
42
|
"&:hover, &:focus": {
|
|
46
|
-
background:
|
|
43
|
+
background: e.palette.primary.lighter,
|
|
47
44
|
opacity: 1
|
|
48
45
|
},
|
|
49
46
|
"& .MuiSvgIcon-root": {
|
|
50
|
-
color:
|
|
47
|
+
color: e.palette.primary.main
|
|
48
|
+
}
|
|
49
|
+
})), d = t(p)(({ size: e, image: o, logo: i }) => ({
|
|
50
|
+
height: e == "sm" ? 85 : 180,
|
|
51
|
+
width: e == "sm" ? 85 : "calc(100% - 2rem)",
|
|
52
|
+
objectFit: "cover",
|
|
53
|
+
margin: e == "sm" ? "0 10px" : "1rem",
|
|
54
|
+
borderRadius: "0.5rem",
|
|
55
|
+
...!o && e === "md" && {
|
|
56
|
+
backgroundImage: `url(${i})`,
|
|
57
|
+
backgroundRepeat: "repeat",
|
|
58
|
+
backgroundSize: "20% 20%",
|
|
59
|
+
backgroundPosition: "center",
|
|
60
|
+
opacity: "0.7"
|
|
61
|
+
}
|
|
62
|
+
})), l = t(n)(({ size: e }) => ({
|
|
63
|
+
padding: e == "sm" ? ".7rem 5px .7rem 0 !important" : "0 16px 16px 16px !important",
|
|
64
|
+
width: e === "sm" ? "calc(100% - 110px)" : "100%"
|
|
65
|
+
})), g = t(r)(({ size: e }) => ({
|
|
66
|
+
display: "flex",
|
|
67
|
+
alignItems: "center",
|
|
68
|
+
marginTop: "0.5rem",
|
|
69
|
+
...e === "sm" && {
|
|
70
|
+
svg: {
|
|
71
|
+
width: ".8em",
|
|
72
|
+
height: ".8em"
|
|
73
|
+
}
|
|
51
74
|
}
|
|
52
|
-
})),
|
|
75
|
+
})), x = t(r)(({ size: e, width: o, isLast: i }) => ({
|
|
76
|
+
marginLeft: e === "sm" ? ".3rem" : ".5rem",
|
|
77
|
+
fontSize: e === "sm" ? "12px" : "15px",
|
|
78
|
+
"& .MuiTypography-root": {
|
|
79
|
+
paddingTop: "2px",
|
|
80
|
+
fontSize: e === "sm" ? "12px" : "15px"
|
|
81
|
+
},
|
|
82
|
+
...i && !o && {
|
|
83
|
+
textOverflow: "ellipsis",
|
|
84
|
+
whiteSpace: "nowrap",
|
|
85
|
+
overflow: "hidden",
|
|
86
|
+
maxWidth: e === "sm" ? "110px" : "172px"
|
|
87
|
+
}
|
|
88
|
+
})), u = t(r)(({ size: e }) => ({
|
|
89
|
+
display: "inline-flex",
|
|
90
|
+
alignItems: "center",
|
|
91
|
+
justifyContent: "center",
|
|
92
|
+
width: "fit-content",
|
|
93
|
+
height: "fit-content",
|
|
94
|
+
...e === "sm" && {
|
|
95
|
+
svg: {
|
|
96
|
+
width: ".8em",
|
|
97
|
+
height: ".8em"
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
})), b = t(r)(({ size: e }) => ({
|
|
53
101
|
position: "absolute",
|
|
54
|
-
bottom: "16px",
|
|
55
|
-
right: "16px",
|
|
102
|
+
bottom: e === "sm" ? ".65rem" : "16px",
|
|
103
|
+
right: e === "sm" ? "8px" : "16px",
|
|
56
104
|
display: "flex",
|
|
57
105
|
gap: ".2rem"
|
|
58
|
-
};
|
|
106
|
+
}));
|
|
59
107
|
export {
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
108
|
+
b as PublicIconWrapper,
|
|
109
|
+
l as ResourceCardBody,
|
|
110
|
+
d as ResourceCardImage,
|
|
111
|
+
u as ResourceIconItem,
|
|
112
|
+
g as ResourcePropertyItem,
|
|
113
|
+
x as ResourcePropertyText,
|
|
114
|
+
m as SelectedIcon,
|
|
115
|
+
c as StyledCard
|
|
64
116
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),a=require("../ResourceCard/ResourceCard.cjs.js"),o=require("../../createSvgIcon-DestgQu_.cjs"),r=require("@mui/material"),s=o.createSvgIcon(e.jsx("path",{d:"M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2m0 18H4V8h16z"}),"CalendarToday"),i=o.createSvgIcon(e.jsx("path",{d:"M19 2H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h4l3 3 3-3h4c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2m-6 16h-2v-2h2zm2.07-7.75-.9.92C13.45 11.9 13 12.5 13 14h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25"}),"LiveHelp"),l=o.createSvgIcon(e.jsx("path",{d:"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39"}),"Public"),c=o.createSvgIcon(e.jsx("path",{d:"M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"}),"Star"),n={title:"Components/ResourceCard",component:a.ResourceCard,argTypes:{isSelected:{description:"Indique si la carte est sélectionnée.",control:"boolean",table:{type:{summary:"boolean"},defaultValue:{summary:"false"}}},onSelect:{description:"Callback déclenché lorsque l'utilisateur sélectionne la carte.",action:"card-selected",table:{type:{summary:"() => void"}}},image:{description:"URL de l'image affichée sur la carte.",control:"text",table:{type:{summary:"string"}}},title:{description:"Titre de la carte.",control:"text",table:{type:{summary:"string"}}},propertyItems:{description:"Liste des propriétés affichées sous le titre.",control:"object",table:{type:{summary:"PropertyItem[{text: Typography, icon: MuiIcon}]"}}},infoIcons:{description:"Liste des icônes d'information affichées dans la carte. (3 maximums)",control:"object",table:{type:{summary:"InfoItem[{text: string, icon: MuiIcon}]"}}},size:{description:"Taille de la carte (petite ou moyenne).",control:"radio",options:["sm","md"],table:{type:{summary:'"sm" | "md"'},defaultValue:{summary:"md"}}},width:{description:"Largeur de la carte.",control:"text",table:{type:{summary:"string"},defaultValue:{summary:"320px"}}}}},t={args:{isSelected:!1,image:"https://dummyimage.com/600x400/000/fff.png&text=flashquizz",logo:"https://flashquizz-dev.support-ent.fr/images/logo.svg",title:"Titre de la Ressource tres loooooooooooooooooooooooooooooooooooooooooooooooooooooong",propertyItems:[{text:e.jsx(r.Typography,{color:"text.primary",children:"0 questions"}),icon:e.jsx(i,{color:"primary"})},{text:e.jsx(r.Typography,{color:"text.primary",children:"27 septembre 2025"}),icon:e.jsx(s,{color:"primary"})}],infoIcons:[{text:"Information 1",icon:e.jsx(l,{color:"primary"})},{text:"Information 2",icon:e.jsx(c,{color:"primary"})},{text:"Information 3",icon:e.jsx(c,{color:"primary"})}],size:"md",onSelect:()=>{console.log("Carte sélectionnée !")},onClick:()=>{console.log("Select all")}}},m={args:{...t.args,isSelected:!0,title:"Carte Sélectionnée"}},d={args:{...t.args,size:"sm",title:"Petite Carte"}},u={args:{...t.args,title:"Pas d'image",image:void 0}};exports.Default=t;exports.NoImage=u;exports.Selected=m;exports.Small=d;exports.default=n;
|
|
@@ -6,5 +6,4 @@ type Story = StoryObj<typeof ResourceCard>;
|
|
|
6
6
|
export declare const Default: Story;
|
|
7
7
|
export declare const Selected: Story;
|
|
8
8
|
export declare const Small: Story;
|
|
9
|
-
export declare const
|
|
10
|
-
export declare const CustomSize: Story;
|
|
9
|
+
export declare const NoImage: Story;
|
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
import { jsx as o } from "react/jsx-runtime";
|
|
2
|
-
import { ResourceCard as
|
|
2
|
+
import { ResourceCard as c } from "../ResourceCard/ResourceCard.es.js";
|
|
3
3
|
import { c as e } from "../../createSvgIcon-C9kh-71a.js";
|
|
4
|
-
import { Typography as
|
|
5
|
-
const
|
|
4
|
+
import { Typography as r } from "@mui/material";
|
|
5
|
+
const i = e(/* @__PURE__ */ o("path", {
|
|
6
6
|
d: "M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2m0 18H4V8h16z"
|
|
7
|
-
}), "CalendarToday"),
|
|
7
|
+
}), "CalendarToday"), s = e(/* @__PURE__ */ o("path", {
|
|
8
8
|
d: "M19 2H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h4l3 3 3-3h4c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2m-6 16h-2v-2h2zm2.07-7.75-.9.92C13.45 11.9 13 12.5 13 14h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25"
|
|
9
9
|
}), "LiveHelp"), l = e(/* @__PURE__ */ o("path", {
|
|
10
10
|
d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39"
|
|
11
|
-
}), "Public"),
|
|
11
|
+
}), "Public"), a = e(/* @__PURE__ */ o("path", {
|
|
12
12
|
d: "M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
|
|
13
13
|
}), "Star"), u = {
|
|
14
14
|
title: "Components/ResourceCard",
|
|
15
|
-
component:
|
|
15
|
+
component: c,
|
|
16
16
|
argTypes: {
|
|
17
17
|
isSelected: {
|
|
18
18
|
description: "Indique si la carte est sélectionnée.",
|
|
@@ -47,14 +47,14 @@ const s = e(/* @__PURE__ */ o("path", {
|
|
|
47
47
|
description: "Liste des propriétés affichées sous le titre.",
|
|
48
48
|
control: "object",
|
|
49
49
|
table: {
|
|
50
|
-
type: { summary: "PropertyItem[]" }
|
|
50
|
+
type: { summary: "PropertyItem[{text: Typography, icon: MuiIcon}]" }
|
|
51
51
|
}
|
|
52
52
|
},
|
|
53
53
|
infoIcons: {
|
|
54
54
|
description: "Liste des icônes d'information affichées dans la carte. (3 maximums)",
|
|
55
55
|
control: "object",
|
|
56
56
|
table: {
|
|
57
|
-
type: { summary: "InfoItem[]" }
|
|
57
|
+
type: { summary: "InfoItem[{text: string, icon: MuiIcon}]" }
|
|
58
58
|
}
|
|
59
59
|
},
|
|
60
60
|
size: {
|
|
@@ -71,26 +71,26 @@ const s = e(/* @__PURE__ */ o("path", {
|
|
|
71
71
|
control: "text",
|
|
72
72
|
table: {
|
|
73
73
|
type: { summary: "string" },
|
|
74
|
-
defaultValue: { summary: "
|
|
74
|
+
defaultValue: { summary: "320px" }
|
|
75
75
|
}
|
|
76
76
|
}
|
|
77
77
|
}
|
|
78
78
|
}, t = {
|
|
79
79
|
args: {
|
|
80
80
|
isSelected: !1,
|
|
81
|
-
image: "https://dummyimage.com/600x400/000/fff&text=flashquizz",
|
|
81
|
+
image: "https://dummyimage.com/600x400/000/fff.png&text=flashquizz",
|
|
82
|
+
logo: "https://flashquizz-dev.support-ent.fr/images/logo.svg",
|
|
82
83
|
title: "Titre de la Ressource tres loooooooooooooooooooooooooooooooooooooooooooooooooooooong",
|
|
83
84
|
propertyItems: [
|
|
84
|
-
{ text: /* @__PURE__ */ o(
|
|
85
|
-
{ text: "27
|
|
85
|
+
{ text: /* @__PURE__ */ o(r, { color: "text.primary", children: "0 questions" }), icon: /* @__PURE__ */ o(s, { color: "primary" }) },
|
|
86
|
+
{ text: /* @__PURE__ */ o(r, { color: "text.primary", children: "27 septembre 2025" }), icon: /* @__PURE__ */ o(i, { color: "primary" }) }
|
|
86
87
|
],
|
|
87
88
|
infoIcons: [
|
|
88
89
|
{ text: "Information 1", icon: /* @__PURE__ */ o(l, { color: "primary" }) },
|
|
89
|
-
{ text: "Information 2", icon: /* @__PURE__ */ o(
|
|
90
|
-
{ text: "Information 3", icon: /* @__PURE__ */ o(
|
|
91
|
-
{ text: "Information 3", icon: /* @__PURE__ */ o(r, { color: "primary" }) }
|
|
90
|
+
{ text: "Information 2", icon: /* @__PURE__ */ o(a, { color: "primary" }) },
|
|
91
|
+
{ text: "Information 3", icon: /* @__PURE__ */ o(a, { color: "primary" }) }
|
|
92
92
|
],
|
|
93
|
-
size: "
|
|
93
|
+
size: "md",
|
|
94
94
|
onSelect: () => {
|
|
95
95
|
console.log("Carte sélectionnée !");
|
|
96
96
|
},
|
|
@@ -110,24 +110,16 @@ const s = e(/* @__PURE__ */ o("path", {
|
|
|
110
110
|
size: "sm",
|
|
111
111
|
title: "Petite Carte"
|
|
112
112
|
}
|
|
113
|
-
}, h = {
|
|
114
|
-
args: {
|
|
115
|
-
...t.args,
|
|
116
|
-
propertyItems: [],
|
|
117
|
-
infoIcons: [],
|
|
118
|
-
title: "Carte sans Icônes"
|
|
119
|
-
}
|
|
120
113
|
}, g = {
|
|
121
114
|
args: {
|
|
122
115
|
...t.args,
|
|
123
|
-
|
|
124
|
-
|
|
116
|
+
title: "Pas d'image",
|
|
117
|
+
image: void 0
|
|
125
118
|
}
|
|
126
119
|
};
|
|
127
120
|
export {
|
|
128
|
-
g as CustomSize,
|
|
129
121
|
t as Default,
|
|
130
|
-
|
|
122
|
+
g as NoImage,
|
|
131
123
|
y as Selected,
|
|
132
124
|
f as Small,
|
|
133
125
|
u as default
|
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.1738155719",
|
|
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",
|