From 46d78d34209258bae4e0db0f1b769b1775b369d1 Mon Sep 17 00:00:00 2001 From: Diego Gonzalez Date: Wed, 3 Aug 2022 10:10:29 -0400 Subject: [PATCH 1/2] fix: add hover state to baseCard and remove custom borders --- CHANGELOG.md | 2 ++ src/components/BaseCard/index.css | 4 ++-- src/components/BaseCard/index.tsx | 19 ++++++++++++++++--- src/components/BorderRadius/index.css | 4 ---- src/components/EventCard/index.css | 2 +- src/components/ModuleCard/index.css | 2 +- src/components/ProgramCard/index.css | 2 +- src/components/ResourcesCard/index.css | 2 +- src/components/WorkSessionCard/index.css | 2 +- 9 files changed, 25 insertions(+), 14 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e4fdd14..a22ef73 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -23,6 +23,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Added +- Remove uneven borders in cards and add hover state styles + ### Fixed ## [7.0.1] 2022-07-21 diff --git a/src/components/BaseCard/index.css b/src/components/BaseCard/index.css index 3ccd34b..9b0841e 100644 --- a/src/components/BaseCard/index.css +++ b/src/components/BaseCard/index.css @@ -1,11 +1,11 @@ @layer components { .pui-baseCard { /* Adds the expected placeholder color for the bg */ - @apply flex w-full pui-rounded-Card overflow-hidden pui-boxshadow-lg; + @apply flex w-full overflow-hidden shadow-md rounded-lg border border-gray-100; } .pui-rounded-gradient-bar { - border-radius: var(--pui-rounded-gradient-bar, 0.75rem 0 0 0.75rem); + border-radius: var(--pui-rounded-gradient-bar, 0.5rem 0 0 0.5rem); } .gradient-bar { diff --git a/src/components/BaseCard/index.tsx b/src/components/BaseCard/index.tsx index 584c2d9..98bf284 100644 --- a/src/components/BaseCard/index.tsx +++ b/src/components/BaseCard/index.tsx @@ -44,6 +44,12 @@ export type BaseCardProps = { * @default string */ classNameGradientImage?: string; + /** + * Extended classes for hover state + * + * @default false + */ + hoverState?: boolean; }; /** @@ -58,7 +64,7 @@ export type BaseCardProps = { * @param props.classNameContent The content on the card className * @param props.classNameGradientImage The filter className * @param props.children The content of the card - + * @param props.hoverState Extended classes for hover state */ export const BaseCard: React.FC = ({ imageGradient, @@ -68,10 +74,17 @@ export const BaseCard: React.FC = ({ children, className, classNameContent, - classNameGradientImage + classNameGradientImage, + hoverState }) => { return ( -
+
{leftGradientBar && (
)} diff --git a/src/components/BorderRadius/index.css b/src/components/BorderRadius/index.css index f27f5ce..bc68049 100644 --- a/src/components/BorderRadius/index.css +++ b/src/components/BorderRadius/index.css @@ -7,8 +7,4 @@ .pui-rounded-bannerCard { border-radius: var(--pui-bradius-bannerCard, 0.625rem 1.875rem 0 0.625rem); } - - .pui-rounded-Card { - border-radius: var(--pui-bradius-bannerCard, 0.75rem 2.5rem 1.25rem 0.75rem); - } } diff --git a/src/components/EventCard/index.css b/src/components/EventCard/index.css index d023d15..f61e1cb 100644 --- a/src/components/EventCard/index.css +++ b/src/components/EventCard/index.css @@ -1,7 +1,7 @@ @layer components { .pui-event-card { /* Adds the expected placeholder color for the bg */ - @apply w-full max-w-lg pui-rounded-Card pui-boxshadow-lg flex flex-row; + @apply w-full max-w-lg pui-boxshadow-lg flex flex-row; } .pui-rounded-gradient-bar { diff --git a/src/components/ModuleCard/index.css b/src/components/ModuleCard/index.css index 27e7631..6a1d75d 100644 --- a/src/components/ModuleCard/index.css +++ b/src/components/ModuleCard/index.css @@ -1,6 +1,6 @@ @layer components { .pui-moduleCard { /* Adds the expected placeholder color for the bg */ - @apply flex flex-col w-full max-w-md pui-rounded-Card overflow-hidden pui-boxshadow-lg; + @apply flex flex-col w-full max-w-md overflow-hidden pui-boxshadow-lg; } } diff --git a/src/components/ProgramCard/index.css b/src/components/ProgramCard/index.css index 1cedce6..afbe877 100644 --- a/src/components/ProgramCard/index.css +++ b/src/components/ProgramCard/index.css @@ -1,7 +1,7 @@ @layer components { .pui-programCard { /* Adds the expected placeholder color for the bg */ - @apply w-full max-w-xs pui-rounded-Card overflow-hidden pui-boxshadow-lg; + @apply w-full max-w-xs overflow-hidden pui-boxshadow-lg; } .percentage-bar { diff --git a/src/components/ResourcesCard/index.css b/src/components/ResourcesCard/index.css index 9b0def4..fd3c620 100644 --- a/src/components/ResourcesCard/index.css +++ b/src/components/ResourcesCard/index.css @@ -1,7 +1,7 @@ @layer components { .pui-resources-card { /* Adds the expected placeholder color for the bg */ - @apply w-full max-w-lg pui-rounded-Card pui-boxshadow-lg flex flex-row; + @apply w-full max-w-lg pui-boxshadow-lg flex flex-row; } .pui-rounded-gradient-bar { diff --git a/src/components/WorkSessionCard/index.css b/src/components/WorkSessionCard/index.css index 5181f26..1111769 100644 --- a/src/components/WorkSessionCard/index.css +++ b/src/components/WorkSessionCard/index.css @@ -1,7 +1,7 @@ @layer components { .pui-worksession-card { /* Adds the expected placeholder color for the bg */ - @apply w-full max-w-lg pui-rounded-Card pui-boxshadow-lg flex flex-row; + @apply w-full max-w-lg pui-boxshadow-lg flex flex-row; } .pui-rounded-gradient-bar { From 18c40520eba9f40f9cd4aff83911ec5722c5c1a6 Mon Sep 17 00:00:00 2001 From: Diego Gonzalez Date: Wed, 3 Aug 2022 10:24:28 -0400 Subject: [PATCH 2/2] build: bumping version 7.1.0 --- CHANGELOG.md | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a22ef73..3dd06c9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -23,10 +23,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Added -- Remove uneven borders in cards and add hover state styles - ### Fixed +## [7.1.0] 2022-08-03 + +### Added + +- Remove uneven borders in cards and add hover state styles + ## [7.0.1] 2022-07-21 ### Changes