Merge pull request #58 from perimetre/fix-cards

v3.4.5
perimetre · Jan 26, 2022 · c901126 · c901126
2 parents e878e6a + 4602e78
commit c901126
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 84 deletions.
diff --git 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**
 
@@ -25,6 +25,26 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### 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.
+
+### 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/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"

diff --git 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
@@ -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
@@ -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
@@ -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" />