catchup-library-web 1.16.11 → 1.16.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "catchup-library-web",
-  "version": "1.16.11",
+  "version": "1.16.13",
   "description": "",
   "main": "dist/index.js",
   "scripts": {

package/src/components/activities/body-content/ShowBodyMediaByContentType.tsx

@@ -391,12 +391,12 @@ const ShowBodyMediaByContentType = ({
           <div className="mb-1 flex flex-col items-center relative">
             <div
               className={`${convertToPercentage(
-                size || ""
+                size
               )} rounded-catchup-xlarge relative`}
             >
               <BaseImage
                 src={value}
-                alt="body image"
+                alt="body-image"
                 size="custom"
                 className="w-full rounded-catchup-xlarge"
               />

package/src/components/cards/BaseCard.tsx

@@ -0,0 +1,13 @@
+import { IBaseCardProps } from "../../properties/CardProperties";
+
+const BaseCard = ({ children }: IBaseCardProps) => {
+  return (
+    <div className="flex flex-col justify-center items-center h-full">
+      <div className="bg-catchup-white rounded-catchup-xlarge h-catchup-card w-catchup-card shadow-dropdown">
+        <div className="flex flex-col mx-auto p-8 h-full">{children}</div>
+      </div>
+    </div>
+  );
+};
+
+export default BaseCard;

package/src/components/cards/FullCard.tsx

@@ -1,31 +1,26 @@
 import { IFullCardProps } from "../../properties/CardProperties";
 
 const FullCard = ({
-  bgColor,
+  backgroundColor,
+  borderColor,
   opacity,
-  isShadowed,
   usePadding,
   children,
 }: IFullCardProps) => {
   return (
-    <div className="flex flex-col justify-center items-center h-full">
+    <div
+      className={`min-h-full 
+        ${backgroundColor ? backgroundColor : "bg-catchup-white"} 
+        ${borderColor ? borderColor : "border-catchup-gray-50"} 
+        ${opacity ? opacity : "opacity-100"} 
+        rounded-catchup-xlarge w-full `}
+    >
       <div
-        className={`flex-1 ${bgColor ? bgColor : ""} ${
-          opacity ? opacity : "opacity-100"
-        } rounded-catchup-xlarge w-full border border-catchup-gray-50 bg-catchup-white`}
-        // style={{
-        //   boxShadow: isShadowed
-        //     ? "rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px"
-        //     : "none",
-        // }}
+        className={`flex flex-col mx-auto ${
+          usePadding === false ? "p-0" : "p-6"
+        } h-full`}
       >
-        <div
-          className={`flex flex-col mx-auto ${
-            usePadding === false ? "p-0" : "p-6"
-          } h-full`}
-        >
-          {children}
-        </div>
+        {children}
       </div>
     </div>
   );

package/src/components/labels/ActivityLabel.tsx

@@ -2,7 +2,7 @@ import { IActivityLabelProps } from "../../properties/LabelProperties";
 
 const ActivityLabel = ({ title, font }: IActivityLabelProps) => {
   return (
-    <div className="px-3 py-1 gap-x-3 border border-publishing-house-label-border bg-publishing-house-label text-publishing-house-label-text rounded-catchup-3xlarge m-auto">
+    <div className="px-3 py-1 gap-x-3 border border-publishing-house-label-border bg-publishing-house-label text-publishing-house-label-text rounded-catchup-3xlarge m-auto text-center">
       <p className={font ? font : "text-sm"}>{title}</p>
     </div>
   );

package/src/components/labels/ActivityTemplateLabel.tsx

@@ -7,7 +7,7 @@ const ActivityTemplateLabel = ({
   font,
 }: IActivityTemplateLabelProps) => {
   return (
-    <div className="px-3 py-1 gap-x-3 border border-grade-label-border bg-grade-label text-grade-label-text rounded-catchup-3xlarge m-auto">
+    <div className="px-3 py-1 gap-x-3 border border-grade-label-border bg-grade-label text-grade-label-text rounded-catchup-3xlarge m-auto text-center">
       <div className="flex flex-row items-center gap-x-2">
         {icon ? (
           icon

package/src/components/labels/BrandLabel.tsx

@@ -3,7 +3,7 @@ import BaseImage from "../images/BaseImage";
 
 const BrandLabel = ({ title, icon, font }: IBrandLabelProps) => {
   return (
-    <div className="px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge m-auto">
+    <div className="px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge m-auto text-center">
       <div className="flex flex-row items-center gap-x-2">
         {icon ? (
           icon

package/src/components/labels/CategoryLabel.tsx

@@ -3,7 +3,7 @@ import BaseImage from "../images/BaseImage";
 
 const CategoryLabel = ({ title, icon, font }: ICategoryLabelProps) => {
   return (
-    <div className="px-3 py-1 gap-x-3 border border-category-label-border bg-category-label text-category-label-text rounded-catchup-3xlarge m-auto">
+    <div className="px-3 py-1 gap-x-3 border border-category-label-border bg-category-label text-category-label-text rounded-catchup-3xlarge m-auto text-center">
       <div className="flex flex-row items-center gap-x-2">
         {icon ? (
           icon

package/src/components/labels/CoterieLabel.tsx

@@ -2,7 +2,7 @@ import { ICoterieLabelProps } from "../../properties/LabelProperties";
 
 const CoterieLabel = ({ title, font }: ICoterieLabelProps) => {
   return (
-    <div className="px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge m-auto">
+    <div className="px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge m-auto text-center">
       <p className={font ? font : "text-sm"}>{title}</p>
     </div>
   );

package/src/components/labels/GradeLabel.tsx

@@ -2,7 +2,7 @@ import { IGradeLabelProps } from "../../properties/LabelProperties";
 
 const GradeLabel = ({ title, font }: IGradeLabelProps) => {
   return (
-    <div className="px-3 py-1 gap-x-3 border border-grade-label-border bg-grade-label text-grade-label-text rounded-catchup-3xlarge m-auto">
+    <div className="px-3 py-1 gap-x-3 border border-grade-label-border bg-grade-label text-grade-label-text rounded-catchup-3xlarge m-auto text-center">
       <p className={font ? font : "text-sm"}>{title}</p>
     </div>
   );

package/src/components/labels/OutcomeLabel.tsx

@@ -3,7 +3,7 @@ import BaseImage from "../images/BaseImage";
 
 const OutcomeLabel = ({ title, font }: IOutcomeLabelProps) => {
   return (
-    <div className="px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge m-auto">
+    <div className="px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge m-auto text-center">
       <div className="flex flex-row items-center gap-x-2">
         <BaseImage src="/icons/category.webp" alt="label" size="xsmall" />
         <p className={font ? font : "text-sm"}>{title}</p>

package/src/components/labels/PersonalLabel.tsx

@@ -3,7 +3,7 @@ import BaseImage from "../images/BaseImage";
 
 const PersonalLabel = ({ title, icon, font }: IPersonalLabelProps) => {
   return (
-    <div className="px-3 py-1 gap-x-3 border border-personal-label-border bg-personal-label text-personal-label-text rounded-catchup-3xlarge m-auto">
+    <div className="px-3 py-1 gap-x-3 border border-personal-label-border bg-personal-label text-personal-label-text rounded-catchup-3xlarge m-auto text-center">
       <div className="flex flex-row items-center gap-x-2">
         {icon ? (
           icon

package/src/components/labels/PublishingHouseLabel.tsx

@@ -3,7 +3,7 @@ import BaseImage from "../images/BaseImage";
 
 const PublishingHouseLabel = ({ title, icon, font }: IPublishingLabelProps) => {
   return (
-    <div className="px-3 py-1 gap-x-3 border border-publishing-house-label-border bg-publishing-house-label text-publishing-house-label-text rounded-catchup-3xlarge m-auto">
+    <div className="px-3 py-1 gap-x-3 border border-publishing-house-label-border bg-publishing-house-label text-publishing-house-label-text rounded-catchup-3xlarge m-auto text-center">
       <div className="flex flex-row items-center gap-x-2">
         {icon ? (
           icon

package/src/index.ts

@@ -10,6 +10,7 @@ export { default as CancelButton } from "./components/buttons/CancelButton";
 export { default as ApproveButton } from "./components/buttons/ApproveButton";
 
 export { default as FullCard } from "./components/cards/FullCard";
+export { default as BaseCard } from "./components/cards/BaseCard";
 
 export { default as BaseImage } from "./components/images/BaseImage";
 

package/src/properties/CardProperties.ts

@@ -1,7 +1,11 @@
 export interface IFullCardProps {
-  bgColor?: string;
+  backgroundColor?: string;
+  borderColor?: string;
   opacity?: string;
-  isShadowed?: boolean;
   usePadding?: boolean;
   children?: React.ReactNode;
 }
+
+export interface IBaseCardProps {
+  children?: React.ReactNode;
+}