From c8a69d0a46e6d2d4ca4b98725c2efdf17f7d4620 Mon Sep 17 00:00:00 2001
From: Alessandro Macanha <alessandromacanha@gmail.com>
Date: Wed, 26 Jan 2022 11:37:15 -0300
Subject: [PATCH 1/2] fix: small fixes on cards

---
 CHANGELOG.md                                  | 12 +++++
 src/components/EventCard/index.tsx            | 50 ++++++++-----------
 src/components/ModuleCard/index.tsx           |  4 +-
 .../ProgramCard/ProgramCard.stories.tsx       | 24 +--------
 src/components/ProgramCard/index.tsx          | 32 ++----------
 5 files changed, 40 insertions(+), 82 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index cd95e9b..1c55332 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -21,10 +21,22 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changes
 
+- Removed gradient props (gradientInitialColor, gradientMiddleColor, gradientFinalColor) from `ProgramCard` component.
+- Removed gradient props (gradientInitialColor, gradientMiddleColor, gradientFinalColor) from `EventCard` component.
+
 ### Added
 
+- Added prop classNameBar to allow changing the styles of bar for the `EventCard` component.
+- Added class `outline-none` to `ModuleCard` to prevent outline when focus the button.
+- Added class `outline-none` to `ProgramCard` to prevent outline when focus the button.
+- Added class `outline-none` to `EventCard` to prevent outline when focus the button.
+- Added `onPressButton` callback to `EventCard` button.
+
 ### Fixed
 
+- Fixed problem with `ModuleCard` and `ProgramCard` buttons displaying a black outline when pressed.
+- Fixed problem with `EventCard` not having a button callback.
+
 ## [3.4.4] 2022-01-24
 
 ### Added
diff --git a/src/components/EventCard/index.tsx b/src/components/EventCard/index.tsx
index ade71f9..56ef2e2 100644
--- a/src/components/EventCard/index.tsx
+++ b/src/components/EventCard/index.tsx
@@ -46,35 +46,29 @@ export type EventCardProps = {
    */
   className?: string;
   /**
-   * Gradient bar initial color value
-   *
-   * @default string
-   */
-  tags?: string;
-  /**
-   * Events Tags
+   * Extended classes for bar
    *
    * @default string
    */
-  tagsLabel?: string;
+  classNameBar?: string;
   /**
-   * Events Tags
+   * Card button callback
    *
-   * @default string
+   * @default void
    */
-  gradientInitialColor?: string;
+  onPressButton?: () => void;
   /**
-   * Gradient bar initial color value if needed
+   * Gradient bar initial color value
    *
    * @default string
    */
-  gradientMiddleColor?: string;
+  tags?: string;
   /**
-   * Gradient bar final color value
+   * Events Tags
    *
    * @default string
    */
-  gradientFinalColor?: string;
+  tagsLabel?: string;
 };
 
 /**
@@ -88,11 +82,10 @@ export type EventCardProps = {
  * @param props.sponsorLabel Set the sponsor image label
  * @param props.imageUrl Set the sponsor image
  * @param props.className The input className
- * @param props.gradientInitialColor The gradient bar initial color value
- * @param props.gradientMiddleColor The input className
- * @param props.gradientFinalColor The input className
  * @param props.tagsLabel The Events tags label
  * @param props.tags The Events tags
+ * @param props.classNameBar The bar className
+ * @param props.onPressButton The callback when pressing the button
  */
 export const EventCard: React.FC<EventCardProps> = ({
   imageUrl,
@@ -102,21 +95,19 @@ export const EventCard: React.FC<EventCardProps> = ({
   date,
   sponsorLabel,
   className,
-  gradientInitialColor,
-  gradientMiddleColor,
-  gradientFinalColor,
   tags,
-  tagsLabel
+  tagsLabel,
+  classNameBar,
+  onPressButton
 }) => {
   return (
     <div className={classnames('pui-event-card', className)}>
       <div
         className={classnames(
-          'gradient-bar',
-          `bg-gradient-to-b ${gradientInitialColor} ${gradientMiddleColor} ${gradientFinalColor}`,
-          className
+          'gradient-bar bg-gradient-to-b from-pui-primary to-pui-current to-pui-secondary',
+          classNameBar
         )}
-      ></div>
+      />
       <div className="icon-wrapper py-6 ml-6">
         <CalendarIcon className="icon h-6 w-6 pui-color-pui-primary" />
       </div>
@@ -143,10 +134,13 @@ export const EventCard: React.FC<EventCardProps> = ({
               className="h-12 w-32 bg-contain bg-no-repeat"
             />
           </div>
-          <span className="inline-flex items-center pui-chip-bordered h-8 justify-items-end cursor-pointer font-bold">
+          <button
+            onClick={onPressButton}
+            className="inline-flex items-center pui-chip-bordered h-8 justify-items-end cursor-pointer font-bold focus:outline-none"
+          >
             {buttonContent}
             <ArrowIcon className="h-4 w-4 ml-2" />
-          </span>
+          </button>
         </div>
       </div>
     </div>
diff --git a/src/components/ModuleCard/index.tsx b/src/components/ModuleCard/index.tsx
index 01e5ec2..e8562d7 100644
--- a/src/components/ModuleCard/index.tsx
+++ b/src/components/ModuleCard/index.tsx
@@ -99,7 +99,7 @@ export const ModuleCard: React.FC<ModuleCardProps> = ({
   return (
     <div className={classnames('pui-moduleCard', className)}>
       <div className="w-full h-28 overflow-hidden relative">
-        <img src={imageUrl} alt={title} className="w-full h-full" />
+        <img src={imageUrl} alt={title} className="w-full h-full object-cover" />
         {filter && (
           <div
             className={classnames(
@@ -115,7 +115,7 @@ export const ModuleCard: React.FC<ModuleCardProps> = ({
         <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 font-bold"
+            className="inline-flex items-center pui-chip-bordered h-8 justify-items-end cursor-pointer font-bold focus:outline-none"
           >
             {buttonContent}
             <ArrowIcon className="h-4 w-4 ml-2" />
diff --git a/src/components/ProgramCard/ProgramCard.stories.tsx b/src/components/ProgramCard/ProgramCard.stories.tsx
index dac4db9..8e0b5cb 100644
--- a/src/components/ProgramCard/ProgramCard.stories.tsx
+++ b/src/components/ProgramCard/ProgramCard.stories.tsx
@@ -3,7 +3,6 @@ import React from 'react';
 import { Story, Meta } from '@storybook/react/types-6-0';
 import { colorOptions } from '../../prebuiltTailwindTheme';
 import { ProgramCard, ProgramCardProps } from '..';
-import { gradientFromClassNameMap, gradientToClassNameMap, gradientViaClassNameMap } from '../../storybookMappers';
 
 export default {
   title: 'Components/ProgramCard',
@@ -39,32 +38,11 @@ export default {
         type: 'text'
       }
     },
-    buttonpercentage: {
+    buttonPercentage: {
       defaultValue: 'View more CTA',
       control: {
         type: 'text'
       }
-    },
-    gradientInitialColor: {
-      defaultValue: 'from-pui-primary',
-      control: {
-        type: 'select',
-        options: gradientFromClassNameMap
-      }
-    },
-    gradientFinalColor: {
-      defaultValue: 'to-pui-secondary',
-      control: {
-        type: 'select',
-        options: gradientToClassNameMap
-      }
-    },
-    gradientMiddleColor: {
-      defaultValue: 'to-pui-current',
-      control: {
-        type: 'select',
-        options: gradientViaClassNameMap
-      }
     }
   }
 } as Meta;
diff --git a/src/components/ProgramCard/index.tsx b/src/components/ProgramCard/index.tsx
index 39b5ff8..361e8ff 100644
--- a/src/components/ProgramCard/index.tsx
+++ b/src/components/ProgramCard/index.tsx
@@ -49,24 +49,6 @@ export type ProgramCardProps = {
    * @default void
    */
   onPressButton?: () => void;
-  /**
-   * Gradient bar initial color value
-   *
-   * @default string
-   */
-  gradientInitialColor?: string;
-  /**
-   * Gradient bar initial color value if needed
-   *
-   * @default string
-   */
-  gradientMiddleColor?: string;
-  /**
-   * Gradient bar final color value
-   *
-   * @default string
-   */
-  gradientFinalColor?: string;
   /**
    * Extended classes for title
    *
@@ -92,9 +74,6 @@ export type ProgramCardProps = {
  * @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.classNameTitle The title className
  * @param props.classNameFilter The filter className
  */
@@ -104,9 +83,6 @@ export const ProgramCard: React.FC<ProgramCardProps> = ({
   percentage,
   buttonPercentage,
   className,
-  gradientInitialColor,
-  gradientMiddleColor,
-  gradientFinalColor,
   filter,
   onPressButton,
   classNameTitle,
@@ -115,7 +91,7 @@ export const ProgramCard: React.FC<ProgramCardProps> = ({
   return (
     <div className={classnames('pui-programCard', className)}>
       <div className="w-full h-28 overflow-hidden relative">
-        <img src={imageUrl} alt={title} className="w-full h-full" />
+        <img src={imageUrl} alt={title} className="w-full h-full object-cover" />
         {filter && (
           <div
             className={classnames(
@@ -125,11 +101,9 @@ export const ProgramCard: React.FC<ProgramCardProps> = ({
           />
         )}
       </div>
-
       <div
         className={classnames(
-          'p-6 pui-color-pui-paragraph-0 text-pui-paragraph-0',
-          `bg-gradient-to-b ${gradientInitialColor} ${gradientMiddleColor} ${gradientFinalColor}`,
+          'p-6 pui-color-pui-paragraph-0 text-pui-paragraph-0 bg-pui-secondary bg-gradient-to-b from-pui-primary to-pui-current to-pui-secondary',
           className
         )}
       >
@@ -143,7 +117,7 @@ export const ProgramCard: React.FC<ProgramCardProps> = ({
         <div className="inline-flex justify-end items-center w-full">
           <button
             onClick={onPressButton}
-            className="inline-flex items-center pui-chip-bordered h-8 justify-items-end cursor-pointer font-bold"
+            className="inline-flex items-center pui-chip-bordered h-8 justify-items-end cursor-pointer font-bold focus:outline-none"
           >
             {buttonPercentage}
             <ArrowIcon className="h-4 w-4 ml-2" />

From 4602e784f251169799539ccfde18f03736a86d64 Mon Sep 17 00:00:00 2001
From: Alessandro Macanha <alessandromacanha@gmail.com>
Date: Wed, 26 Jan 2022 11:41:22 -0300
Subject: [PATCH 2/2] build: bumping version: 3.4.5

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1c55332..24dc209 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,12 +15,20 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed -->
 
-[Unreleased]
+## [Unreleased]
 
 ### **Breaking changes**
 
 ### Changes
 
+### Added
+
+### Fixed
+
+## [3.4.5] 2022-01-26
+
+### Changes
+
 - Removed gradient props (gradientInitialColor, gradientMiddleColor, gradientFinalColor) from `ProgramCard` component.
 - Removed gradient props (gradientInitialColor, gradientMiddleColor, gradientFinalColor) from `EventCard` component.
 
diff --git a/package.json b/package.json
index 3facbec..d4ba860 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@perimetre/ui",
   "description": "A component library made by @perimetre",
-  "version": "3.4.4",
+  "version": "3.4.5",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/perimetre/ui.git"