diff --git a/CHANGELOG.md b/CHANGELOG.md index 7d94bd2..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** @@ -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 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" 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>