@cgi-learning-hub/ui 1.3.5-dev.1737994728 → 1.3.5-dev.1738155719

package/dist/components/ResourceCard/ResourceCard.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("@mui/material"),h=require("react"),u=require("../../createSvgIcon-DestgQu_.cjs"),r=require("./style.cjs.js"),m=require("../EllipsisWithTooltip/EllipsisWithTooltip.cjs.js"),j=u.createSvgIcon(e.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=h.forwardRef(({isSelected:n=!1,onSelect:a=()=>{},image:x,title:d,propertyItems:o=[],infoIcons:i=[],size:C="md",width:c,height:l},p)=>(i=i.slice(0,3),e.jsx(t.Box,{ref:p,sx:{position:"relative",width:c||"300px",height:l||"auto"},children:e.jsxs(r.StyledCard,{selected:n,children:[e.jsx(t.Box,{sx:{width:"100%",display:"flex",alignItems:"center",justifyContent:"center"},children:e.jsx(t.CardMedia,{image:x,sx:r.ImageStyle})}),e.jsxs(t.CardContent,{sx:{padding:"0 16px 16px 16px"},children:[e.jsx(m,{typographyProps:{fontWeight:"700",fontSize:"1.1rem"},tooltipProps:{placement:"bottom",arrow:!0},children:d}),o.length>0&&o.map(s=>e.jsxs(t.Box,{sx:r.ItemCard,children:[s.icon&&s.icon,e.jsx(t.Box,{sx:{marginLeft:"0.5rem",display:"flex"},children:s.text})]})),e.jsx(t.Box,{sx:r.PublicIconWrapper,children:i.length>0&&i.map(s=>e.jsx(t.Tooltip,{title:s.text,placement:"top",arrow:!0,children:e.jsx(t.Box,{sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",width:"fit-content",height:"fit-content"},children:s.icon})}))})]}),e.jsx(r.SelectedIcon,{onClick:s=>{s.stopPropagation(),a()},className:"selected-icon",selected:n,children:e.jsx(j,{})})]})})));exports.ResourceCard=g;
+"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;

package/dist/components/ResourceCard/ResourceCard.d.ts

@@ -7,17 +7,17 @@ export type InfoItem = {
     text: string;
     icon: ReactNode;
 };
-type Size = "md" | "sm";
+export type ResourceCardSize = "md" | "sm";
 export interface ResourceCardProps {
     isSelected?: boolean;
     onSelect?: () => void;
     image?: string;
+    logo: string;
     title: string;
     propertyItems?: PropertyItem[];
     infoIcons?: InfoItem[];
-    size?: Size;
+    size?: ResourceCardSize;
     width?: string;
-    height?: string;
+    onClick?: () => void;
 }
 export declare const ResourceCard: import('react').ForwardRefExoticComponent<ResourceCardProps & import('react').RefAttributes<HTMLDivElement>>;
-export {};

package/dist/components/ResourceCard/ResourceCard.es.js

@@ -1,62 +1,136 @@
-import { jsx as e, jsxs as o } from "react/jsx-runtime";
-import { Box as r, CardMedia as h, CardContent as x, Tooltip as f } from "@mui/material";
-import { forwardRef as g } from "react";
-import { c as C } from "../../createSvgIcon-C9kh-71a.js";
-import { StyledCard as u, ImageStyle as y, ItemCard as w, PublicIconWrapper as j, SelectedIcon as M } from "./style.es.js";
-import P from "../EllipsisWithTooltip/EllipsisWithTooltip.es.js";
-const S = C(/* @__PURE__ */ e("path", {
+import { jsx as r, jsxs as d } from "react/jsx-runtime";
+import { Box as s, Tooltip as f } from "@mui/material";
+import { forwardRef as x } from "react";
+import { c as g } from "../../createSvgIcon-C9kh-71a.js";
+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";
+import j from "../EllipsisWithTooltip/EllipsisWithTooltip.es.js";
+const E = g(/* @__PURE__ */ r("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"), V = g(({ isSelected: n = !1, onSelect: a = () => {
-}, image: d, title: p, propertyItems: l = [], infoIcons: i = [], size: I = "md", width: c, height: s }, m) => (i = i.slice(0, 3), /* @__PURE__ */ e(r, { ref: m, sx: {
+}), "MoreVert"), V = x(({
+  isSelected: c = !1,
+  onSelect: m = () => {
+  },
+  image: h,
+  title: n,
+  logo: u,
+  propertyItems: i = [],
+  infoIcons: a = [],
+  size: t = "md",
+  width: p,
+  onClick: l = () => {
+  }
+}, b) => (a = a.slice(0, 3), /* @__PURE__ */ r(s, { ref: b, sx: {
   position: "relative",
-  width: c || "300px",
-  height: s || "auto"
-}, children: /* @__PURE__ */ o(u, { selected: n, children: [
-  /* @__PURE__ */ e(r, { sx: {
-    width: "100%",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center"
-  }, children: /* @__PURE__ */ e(h, { image: d, sx: y }) }),
-  /* @__PURE__ */ o(x, { sx: { padding: "0 16px 16px 16px" }, children: [
-    /* @__PURE__ */ e(
-      P,
-      {
-        typographyProps: { fontWeight: "700", fontSize: "1.1rem" },
-        tooltipProps: { placement: "bottom", arrow: !0 },
-        children: p
-      }
-    ),
-    l.length > 0 && l.map((t) => /* @__PURE__ */ o(r, { sx: w, children: [
-      t.icon && t.icon,
-      /* @__PURE__ */ e(r, { sx: { marginLeft: "0.5rem", display: "flex" }, children: t.text })
-    ] })),
-    /* @__PURE__ */ e(r, { sx: j, children: i.length > 0 && i.map((t) => /* @__PURE__ */ e(f, { title: t.text, placement: "top", arrow: !0, children: /* @__PURE__ */ e(
-      r,
-      {
-        sx: {
-          display: "inline-flex",
-          alignItems: "center",
-          justifyContent: "center",
-          width: "fit-content",
-          height: "fit-content"
-        },
-        children: t.icon
-      }
-    ) })) })
-  ] }),
-  /* @__PURE__ */ e(
-    M,
-    {
-      onClick: (t) => {
-        t.stopPropagation(), a();
-      },
-      className: "selected-icon",
-      selected: n,
-      children: /* @__PURE__ */ e(S, {})
-    }
-  )
-] }) })));
+  width: p && t === "md" ? p : "320px",
+  height: "auto"
+}, children: /* @__PURE__ */ d(
+  y,
+  {
+    selected: c,
+    size: t,
+    onClick: l,
+    onKeyDown: (e) => {
+      (e.key === "Enter" || e.key === " ") && (e.preventDefault(), l == null || l());
+    },
+    role: "button",
+    tabIndex: 0,
+    "aria-label": `Resource card for ${n}`,
+    children: [
+      /* @__PURE__ */ r(
+        R,
+        {
+          onClick: (e) => {
+            e.stopPropagation(), m();
+          },
+          onKeyDown: (e) => {
+            (e.key === "Enter" || e.key === " ") && (e.preventDefault(), m());
+          },
+          className: "selected-icon",
+          selected: c,
+          role: "button",
+          tabIndex: 0,
+          "aria-label": c ? "Unselect card" : "Select card",
+          children: /* @__PURE__ */ r(E, {})
+        }
+      ),
+      /* @__PURE__ */ r(s, { sx: {
+        width: t == "sm" ? 110 : "100%",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        boxSizing: "border-box"
+      }, children: /* @__PURE__ */ r(
+        P,
+        {
+          image: h,
+          logo: u,
+          role: "img",
+          "aria-label": `Image for ${n}`
+        }
+      ) }),
+      /* @__PURE__ */ d(
+        I,
+        {
+          size: t,
+          children: [
+            /* @__PURE__ */ r(
+              j,
+              {
+                typographyProps: { fontWeight: "700", fontSize: "1.1rem" },
+                tooltipProps: { placement: "bottom", arrow: !0 },
+                children: n
+              }
+            ),
+            i.length > 0 && i.map((e, o) => /* @__PURE__ */ d(
+              w,
+              {
+                role: "group",
+                "aria-label": `Property ${o}`,
+                children: [
+                  e.icon,
+                  /* @__PURE__ */ r(
+                    $,
+                    {
+                      isLast: o === i.length - 1,
+                      size: t,
+                      width: p,
+                      children: e.text
+                    }
+                  )
+                ]
+              },
+              `property-${o}`
+            )),
+            /* @__PURE__ */ r(
+              v,
+              {
+                size: t,
+                children: a.length > 0 && a.map((e, o) => /* @__PURE__ */ r(
+                  f,
+                  {
+                    title: e.text,
+                    placement: "top",
+                    arrow: !0,
+                    children: /* @__PURE__ */ r(
+                      D,
+                      {
+                        role: "button",
+                        tabIndex: 0,
+                        "aria-label": e.text,
+                        children: e.icon
+                      }
+                    )
+                  },
+                  `info-${o}`
+                ))
+              }
+            )
+          ]
+        }
+      )
+    ]
+  }
+) })));
 export {
   V as ResourceCard
 };

package/dist/components/ResourceCard/style.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("@mui/material"),r={display:"flex",marginTop:"0.5rem"},o=i.styled(i.Card)(({theme:e,selected:t})=>({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",...t&&{borderColor:e.palette.primary.light},"&:hover":{"& .MuiBox-root.selected-icon":{opacity:1,visibility:"visible"}}})),a={height:180,width:"calc(100% - 2rem)",maxWidth:300,objectFit:"cover",margin:"1rem",borderRadius:"0.5rem"},l=i.styled(i.Box)(({theme:e,selected:t})=>({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:"hidden",opacity:0,cursor:"pointer",transition:"opacity 0.2s ease-in-out, visibility 0.2s ease-in-out",...t&&{background:e.palette.primary.lighter,opacity:1,visibility:"visible"},"&:hover":{background:e.palette.primary.lighter},"& .MuiSvgIcon-root":{color:e.palette.primary.main}})),n={position:"absolute",bottom:".8rem",right:".8rem",display:"flex",gap:".2rem"};exports.ImageStyle=a;exports.ItemCard=r;exports.PublicIconWrapper=n;exports.SelectedIcon=l;exports.StyledCard=o;
+"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;

package/dist/components/ResourceCard/style.es.js

@@ -1,15 +1,16 @@
-import { styled as e, Card as t, Box as o } from "@mui/material";
-const s = {
-  display: "flex",
-  marginTop: "0.5rem"
-}, n = e(t)(({ theme: i, selected: r }) => ({
+import { styled as t, Card as a, Box as r, CardMedia as p, CardContent as n } from "@mui/material";
+const c = t(a)(({ theme: e, selected: o, size: i }) => ({
   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 && {
-    borderColor: i.palette.primary.light
+  ...i === "sm" && {
+    display: "flex",
+    width: "100%"
+  },
+  ...o && {
+    borderColor: e.palette.primary.light
   },
   "&:hover": {
     "& .MuiBox-root.selected-icon": {
@@ -17,51 +18,99 @@ const s = {
       visibility: "visible"
     }
   }
-})), p = {
-  height: 180,
-  width: "calc(100% - 2rem)",
-  maxWidth: 300,
-  objectFit: "cover",
-  margin: "1rem",
-  borderRadius: "0.5rem"
-}, l = e(o)(({ theme: i, selected: r }) => ({
+})), m = t(r)(({ theme: e, selected: o }) => ({
   position: "absolute",
   top: 0,
   right: 0,
   width: "2rem",
   height: "2rem",
-  background: i.palette.common.white,
+  background: e.palette.common.white,
   display: "flex",
   justifyContent: "center",
   alignItems: "center",
   padding: ".8rem",
   borderRadius: ".5rem",
-  visibility: "hidden",
+  visibility: "visible",
   opacity: 0,
   cursor: "pointer",
   transition: "opacity 0.2s ease-in-out, visibility 0.2s ease-in-out",
-  ...r && {
-    background: i.palette.primary.lighter,
+  ...o && {
+    background: e.palette.primary.lighter,
     opacity: 1,
     visibility: "visible"
   },
-  "&:hover": {
-    background: i.palette.primary.lighter
+  "&:hover, &:focus": {
+    background: e.palette.primary.lighter,
+    opacity: 1
   },
   "& .MuiSvgIcon-root": {
-    color: i.palette.primary.main
+    color: e.palette.primary.main
+  }
+})), d = t(p)(({ size: e, image: o, logo: i }) => ({
+  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(${i})`,
+    backgroundRepeat: "repeat",
+    backgroundSize: "20% 20%",
+    backgroundPosition: "center",
+    opacity: "0.7"
+  }
+})), l = t(n)(({ size: e }) => ({
+  padding: e == "sm" ? ".7rem 5px .7rem 0 !important" : "0 16px 16px 16px !important",
+  width: e === "sm" ? "calc(100% - 110px)" : "100%"
+})), g = t(r)(({ size: e }) => ({
+  display: "flex",
+  alignItems: "center",
+  marginTop: "0.5rem",
+  ...e === "sm" && {
+    svg: {
+      width: ".8em",
+      height: ".8em"
+    }
   }
-})), d = {
+})), x = t(r)(({ size: e, width: o, isLast: i }) => ({
+  marginLeft: e === "sm" ? ".3rem" : ".5rem",
+  fontSize: e === "sm" ? "12px" : "15px",
+  "& .MuiTypography-root": {
+    paddingTop: "2px",
+    fontSize: e === "sm" ? "12px" : "15px"
+  },
+  ...i && !o && {
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    maxWidth: e === "sm" ? "110px" : "172px"
+  }
+})), u = t(r)(({ size: e }) => ({
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: "fit-content",
+  height: "fit-content",
+  ...e === "sm" && {
+    svg: {
+      width: ".8em",
+      height: ".8em"
+    }
+  }
+})), b = t(r)(({ size: e }) => ({
   position: "absolute",
-  bottom: ".8rem",
-  right: ".8rem",
+  bottom: e === "sm" ? ".65rem" : "16px",
+  right: e === "sm" ? "8px" : "16px",
   display: "flex",
   gap: ".2rem"
-};
+}));
 export {
-  p as ImageStyle,
-  s as ItemCard,
-  d as PublicIconWrapper,
-  l as SelectedIcon,
-  n as StyledCard
+  b as PublicIconWrapper,
+  l as ResourceCardBody,
+  d as ResourceCardImage,
+  u as ResourceIconItem,
+  g as ResourcePropertyItem,
+  x as ResourcePropertyText,
+  m as SelectedIcon,
+  c as StyledCard
 };

package/dist/components/stories/ResourceCard.stories.cjs.js

@@ -1 +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"),s=require("@mui/material"),c=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"),n=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"),r=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"),l={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[]"}}},infoIcons:{description:"Liste des icônes d'information affichées dans la carte. (3 maximums)",control:"object",table:{type:{summary:"InfoItem[]"}}},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:"300px"}}},height:{description:"Hauteur de la carte.",control:"text",table:{type:{summary:"string"},defaultValue:{summary:"auto"}}}}},t={args:{isSelected:!1,image:"https://dummyimage.com/600x400/000/fff&text=flashquizz",title:"Titre de la Ressource",propertyItems:[{text:e.jsx(s.Typography,{color:"text.primary",children:"0 questions"}),icon:e.jsx(i,{color:"primary"})},{text:"27 janvier 2025",icon:e.jsx(c,{color:"primary"})}],infoIcons:[{text:"Information 1",icon:e.jsx(n,{color:"primary"})},{text:"Information 2",icon:e.jsx(r,{color:"primary"})},{text:"Information 3",icon:e.jsx(r,{color:"primary"})}],size:"md",width:"300px",height:"auto",onSelect:()=>{console.log("Carte sélectionnée !")}}},m={args:{...t.args,isSelected:!0,title:"Carte Sélectionnée"}},u={args:{...t.args,size:"sm",title:"Petite Carte"}},d={args:{...t.args,propertyItems:[],infoIcons:[],title:"Carte sans Icônes"}},p={args:{...t.args,width:"400px",height:"200px",title:"Carte avec taille personnalisée"}};exports.CustomSize=p;exports.Default=t;exports.NoIcons=d;exports.Selected=m;exports.Small=u;exports.default=l;
+"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;

package/dist/components/stories/ResourceCard.stories.d.ts

@@ -6,5 +6,4 @@ type Story = StoryObj<typeof ResourceCard>;
 export declare const Default: Story;
 export declare const Selected: Story;
 export declare const Small: Story;
-export declare const NoIcons: Story;
-export declare const CustomSize: Story;
+export declare const NoImage: Story;

package/dist/components/stories/ResourceCard.stories.es.js

@@ -1,18 +1,18 @@
-import { jsx as e } from "react/jsx-runtime";
-import { ResourceCard as a } from "../ResourceCard/ResourceCard.es.js";
-import { c as t } from "../../createSvgIcon-C9kh-71a.js";
-import { Typography as c } from "@mui/material";
-const s = t(/* @__PURE__ */ e("path", {
+import { jsx as o } from "react/jsx-runtime";
+import { ResourceCard as c } from "../ResourceCard/ResourceCard.es.js";
+import { c as e } from "../../createSvgIcon-C9kh-71a.js";
+import { Typography as r } from "@mui/material";
+const i = e(/* @__PURE__ */ o("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 = t(/* @__PURE__ */ e("path", {
+}), "CalendarToday"), s = e(/* @__PURE__ */ o("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 = t(/* @__PURE__ */ e("path", {
+}), "LiveHelp"), l = e(/* @__PURE__ */ o("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"), r = t(/* @__PURE__ */ e("path", {
+}), "Public"), a = e(/* @__PURE__ */ o("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"), u = {
   title: "Components/ResourceCard",
-  component: a,
+  component: c,
   argTypes: {
     isSelected: {
       description: "Indique si la carte est sélectionnée.",
@@ -47,14 +47,14 @@ const s = t(/* @__PURE__ */ e("path", {
       description: "Liste des propriétés affichées sous le titre.",
       control: "object",
       table: {
-        type: { summary: "PropertyItem[]" }
+        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[]" }
+        type: { summary: "InfoItem[{text: string, icon: MuiIcon}]" }
       }
     },
     size: {
@@ -71,71 +71,56 @@ const s = t(/* @__PURE__ */ e("path", {
       control: "text",
       table: {
         type: { summary: "string" },
-        defaultValue: { summary: "300px" }
-      }
-    },
-    height: {
-      description: "Hauteur de la carte.",
-      control: "text",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "auto" }
+        defaultValue: { summary: "320px" }
       }
     }
   }
-}, o = {
+}, t = {
   args: {
     isSelected: !1,
-    image: "https://dummyimage.com/600x400/000/fff&text=flashquizz",
-    title: "Titre de la Ressource",
+    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: /* @__PURE__ */ e(c, { color: "text.primary", children: "0 questions" }), icon: /* @__PURE__ */ e(i, { color: "primary" }) },
-      { text: "27 janvier 2025", icon: /* @__PURE__ */ e(s, { color: "primary" }) }
+      { text: /* @__PURE__ */ o(r, { color: "text.primary", children: "0 questions" }), icon: /* @__PURE__ */ o(s, { color: "primary" }) },
+      { text: /* @__PURE__ */ o(r, { color: "text.primary", children: "27 septembre 2025" }), icon: /* @__PURE__ */ o(i, { color: "primary" }) }
     ],
     infoIcons: [
-      { text: "Information 1", icon: /* @__PURE__ */ e(l, { color: "primary" }) },
-      { text: "Information 2", icon: /* @__PURE__ */ e(r, { color: "primary" }) },
-      { text: "Information 3", icon: /* @__PURE__ */ e(r, { color: "primary" }) }
+      { text: "Information 1", icon: /* @__PURE__ */ o(l, { color: "primary" }) },
+      { text: "Information 2", icon: /* @__PURE__ */ o(a, { color: "primary" }) },
+      { text: "Information 3", icon: /* @__PURE__ */ o(a, { color: "primary" }) }
     ],
     size: "md",
-    width: "300px",
-    height: "auto",
     onSelect: () => {
       console.log("Carte sélectionnée !");
+    },
+    onClick: () => {
+      console.log("Select all");
     }
   }
 }, y = {
   args: {
-    ...o.args,
+    ...t.args,
     isSelected: !0,
     title: "Carte Sélectionnée"
   }
-}, h = {
+}, f = {
   args: {
-    ...o.args,
+    ...t.args,
     size: "sm",
     title: "Petite Carte"
   }
-}, f = {
-  args: {
-    ...o.args,
-    propertyItems: [],
-    infoIcons: [],
-    title: "Carte sans Icônes"
-  }
 }, g = {
   args: {
-    ...o.args,
-    width: "400px",
-    height: "200px",
-    title: "Carte avec taille personnalisée"
+    ...t.args,
+    title: "Pas d'image",
+    image: void 0
   }
 };
 export {
-  g as CustomSize,
-  o as Default,
-  f as NoIcons,
+  t as Default,
+  g as NoImage,
   y as Selected,
-  h as Small,
+  f as Small,
   u as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cgi-learning-hub/ui",
-  "version": "1.3.5-dev.1737994728",
+  "version": "1.3.5-dev.1738155719",
   "private": false,
   "author": "CGI Learning-hub Team",
   "description": "@cgi-learning-hub/ui is an open-source React component library that implements UI for HUB's features",