Merge pull request #57 from perimetre/fix/programcard

v3.4.4

CHANGELOG.md

@@ -15,7 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed -->
 
-## [Unreleased]
+[Unreleased]
 
 ### **Breaking changes**
 
@@ -25,6 +25,18 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
+## [3.4.4] 2022-01-24
+
+### Added
+
+- Added prop classNameTitle to allow changing the styles of title for the `ProgramCard` component.
+- Added filter props (filter variant and classNameFilter) on `ProgramCard` to display a linear gradient overlay on the top of the image.
+- Added `onPressButton` callback to `ProgramCard` button.
+
+### Fixed
+
+- Fixed problem with `ProgramCard` not having a button callback.
+
 ## [3.4.3] 2022-01-24
 
 ### Fixed

package.json

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

src/components/ProgramCard/ProgramCard.stories.tsx

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

src/components/ProgramCard/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 ProgramCardProps = {
+  /**
+   * The card filter variant
+   *
+   * @default default
+   */
+  filter?: keyof typeof variantFilterap;
   /**
    * Card Image url
    *
@@ -26,13 +36,19 @@ export type ProgramCardProps = {
    *
    * @default string
    */
-  buttonpercentage?: string;
+  buttonPercentage?: string;
   /**
    * Extended classes
    *
    * @default string
    */
   className?: string;
+  /**
+   * Card button callback
+   *
+   * @default void
+   */
+  onPressButton?: () => void;
   /**
    * Gradient bar initial color value
    *
@@ -51,53 +67,87 @@ export type ProgramCardProps = {
    * @default string
    */
   gradientFinalColor?: string;
+  /**
+   * Extended classes for title
+   *
+   * @default string
+   */
+  classNameTitle?: 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.percentage Set the text percentage for the card
- * @param props.buttonpercentage Set the button label for the card
+ * @param props.buttonPercentage Set the button label for the card
  * @param props.className The input className
+ * @param props.onPressButton The callback when pressing the button
  * @param props.gradientInitialColor The gradient bar initial color value
  * @param props.gradientMiddleColor The input className
- * @param props.gradientFinalColor The input className
+ * @param props.gradientFinalColor The input className,
+ * @param props.classNameTitle The title className
+ * @param props.classNameFilter The filter className
  */
 export const ProgramCard: React.FC<ProgramCardProps> = ({
   imageUrl,
   title,
   percentage,
-  buttonpercentage,
+  buttonPercentage,
   className,
   gradientInitialColor,
   gradientMiddleColor,
-  gradientFinalColor
+  gradientFinalColor,
+  filter,
+  onPressButton,
+  classNameTitle,
+  classNameFilter
 }) => {
   return (
     <div className={classnames('pui-programCard', className)}>
-      <img src={imageUrl} alt="" className="w-full max-h-28" />
+      <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={classnames(
           'p-6 pui-color-pui-paragraph-0 text-pui-paragraph-0',
           `bg-gradient-to-b ${gradientInitialColor} ${gradientMiddleColor} ${gradientFinalColor}`,
           className
         )}
       >
-        <h4 className="text-2xl font-bold mb-3">{title}</h4>
+        <h4 className={classnames('text-2xl font-bold mb-3', classNameTitle)}>{title}</h4>
         <div className="w-full flex items-center justify-between mb-6">
           <div className="percentage-bar">
             <span className="progress-bar" style={{ width: percentage + '%' }}></span>
           </div>
           {percentage}%
         </div>
         <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 font-bold">
-            {buttonpercentage}
+          <button
+            onClick={onPressButton}
+            className="inline-flex items-center pui-chip-bordered h-8 justify-items-end cursor-pointer font-bold"
+          >
+            {buttonPercentage}
             <ArrowIcon className="h-4 w-4 ml-2" />
-          </span>
+          </button>
         </div>
       </div>
     </div>