Merge pull request #54 from perimetre/fix/moduleCard

Fix/module card

CHANGELOG.md

@@ -25,6 +25,18 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
+## [3.4.1] 2022-01-14
+
+### Added
+
+- Added props (classNameTitle and classNameContent) to allow changing the styles of title and content from the `ModuleCard` component.
+- Added filter props (filter variant and classNameFilter) on `ModuleCard` to display a linear gradient overlay on the top of the image.
+- Added `onPressButton` callback to `ModuleCard` button.
+
+### Fixed
+
+- Fixed problem with `ModuleCard` not having a button callback.
+
 ## [3.4.0] 2022-01-10
 
 ### Added

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@perimetre/ui",
   "description": "A component library made by @perimetre",
-  "version": "3.4.0",
+  "version": "3.4.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/perimetre/ui.git"

src/components/ModuleCard/ModuleCard.stories.tsx

@@ -58,3 +58,8 @@ export default {
 const Template: Story<ModuleCardProps & { color?: string }> = ({ ...props }) => <ModuleCard {...props} />;
 
 export const Default = Template.bind({});
+
+export const Gradient = Template.bind({});
+Gradient.args = {
+  filter: 'gradient'
+};

src/components/ModuleCard/index.css

@@ -1,6 +1,6 @@
 @layer components {
   .pui-moduleCard {
     /* Adds the expected placeholder color for the bg */
-    @apply w-full max-w-md pui-rounded-Card overflow-hidden pui-boxshadow-lg;
+    @apply flex flex-col w-full max-w-md pui-rounded-Card overflow-hidden pui-boxshadow-lg;
   }
 }

src/components/ModuleCard/index.tsx

@@ -2,7 +2,17 @@ import React from 'react';
 import classnames from 'classnames';
 import { ArrowIcon } from '..';
 
+const variantFilterap = {
+  gradient: 'pui-moduleCard-gradient'
+};
+
 export type ModuleCardProps = {
+  /**
+   * The card filter variant
+   *
+   * @default default
+   */
+  filter?: keyof typeof variantFilterap;
   /**
    * Card Image url
    *
@@ -27,36 +37,89 @@ export type ModuleCardProps = {
    * @default string
    */
   buttonContent?: string;
+  /**
+   * Card button callback
+   *
+   * @default void
+   */
+  onPressButton?: () => void;
   /**
    * Extended classes
    *
    * @default string
    */
   className?: string;
+  /**
+   * Extended classes for title
+   *
+   * @default string
+   */
+  classNameTitle?: string;
+  /**
+   * Extended classes for content
+   *
+   * @default string
+   */
+  classNameContent?: string;
+  /**
+   * Extended classes for filter
+   *
+   * @default string
+   */
+  classNameFilter?: string;
 };
 
 /**
  * A Percentage Circle
  *
  * @param props The input props
+ * @param props.filter The filter variant
  * @param props.imageUrl Set the image for the card
  * @param props.title Set the title for the card
  * @param props.content Set the text content for the card
  * @param props.buttonContent Set the button label for the card
  * @param props.className The input className
+ * @param props.onPressButton The callback when pressing the button
+ * @param props.classNameTitle The title className
+ * @param props.classNameContent The content className
+ * @param props.classNameFilter The filter className
  */
-export const ModuleCard: React.FC<ModuleCardProps> = ({ imageUrl, title, content, buttonContent, className }) => {
+export const ModuleCard: React.FC<ModuleCardProps> = ({
+  filter,
+  imageUrl,
+  title,
+  content,
+  buttonContent,
+  onPressButton,
+  className,
+  classNameTitle,
+  classNameContent,
+  classNameFilter
+}) => {
   return (
     <div className={classnames('pui-moduleCard', className)}>
-      <img src={imageUrl} alt="" className="w-full max-h-28" />
-      <div className="p-6">
-        <h4 className="text-lg font-bold mb-3">{title}</h4>
-        <p className="text-base mb-6 font-normal">{content}</p>
-        <div className="inline-flex justify-end items-center w-full">
-          <span className="inline-flex items-center pui-chip-bordered h-8 justify-items-end cursor-pointer">
+      <div className="w-full h-28 overflow-hidden relative">
+        <img src={imageUrl} alt={title} className="w-full h-full" />
+        {filter && (
+          <div
+            className={classnames(
+              'absolute opacity-25 z-10 inset-0 w-full h-full bg-gradient-to-r from-pui-primary to-pui-secondary',
+              classNameFilter
+            )}
+          />
+        )}
+      </div>
+      <div className="flex flex-col flex-1 p-6">
+        <h4 className={classnames('text-lg font-bold mb-3', classNameTitle)}>{title}</h4>
+        <p className={classnames('text-base mb-6 font-normal', classNameContent)}>{content}</p>
+        <div className="flex-1 inline-flex justify-end items-end w-full">
+          <button
+            onClick={onPressButton}
+            className="inline-flex items-center pui-chip-bordered h-8 justify-items-end cursor-pointer"
+          >
             {buttonContent}
             <ArrowIcon className="h-4 w-4 ml-2" />
-          </span>
+          </button>
         </div>
       </div>
     </div>