From 1876d6fd85342e479e0074ae41bfbd5bd4429622 Mon Sep 17 00:00:00 2001
From: Alessandro Macanha <alessandromacanha@gmail.com>
Date: Mon, 24 Jan 2022 14:48:59 -0300
Subject: [PATCH 1/2] fix: small fixes on programCard

---
 CHANGELOG.md                                  |  6 ++
 .../ProgramCard/ProgramCard.stories.tsx       |  5 ++
 src/components/ProgramCard/index.tsx          | 70 ++++++++++++++++---
 3 files changed, 71 insertions(+), 10 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7d94bd2..4796131 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -23,8 +23,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### 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
diff --git a/src/components/ProgramCard/ProgramCard.stories.tsx b/src/components/ProgramCard/ProgramCard.stories.tsx
index 936b2bb..dac4db9 100644
--- a/src/components/ProgramCard/ProgramCard.stories.tsx
+++ b/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'
+};
diff --git a/src/components/ProgramCard/index.tsx b/src/components/ProgramCard/index.tsx
index 15e967b..39b5ff8 100644
--- a/src/components/ProgramCard/index.tsx
+++ b/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,34 +67,65 @@ 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',
@@ -86,7 +133,7 @@ export const ProgramCard: React.FC<ProgramCardProps> = ({
           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>
@@ -94,10 +141,13 @@ export const ProgramCard: React.FC<ProgramCardProps> = ({
           {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>

From 7fede45ddc70a755e493e3381fe2c6e34bdb884f Mon Sep 17 00:00:00 2001
From: Alessandro Macanha <alessandromacanha@gmail.com>
Date: Mon, 24 Jan 2022 14:57:10 -0300
Subject: [PATCH 2/2] build: bumping version: 3.4.4

---
 CHANGELOG.md | 8 +++++++-
 package.json | 2 +-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4796131..cd95e9b 100644
--- a/CHANGELOG.md
+++ b/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**
 
@@ -23,6 +23,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+### 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.
diff --git a/package.json b/package.json
index 08c4aab..3facbec 100644
--- a/package.json
+++ b/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"