From c9e1638dc4afb85bd9d8cd887d19c7f1c319d0a2 Mon Sep 17 00:00:00 2001 From: Diego Gonzalez Date: Wed, 16 Feb 2022 09:10:41 -0500 Subject: [PATCH 1/5] feat: add a base card element --- src/components/BaseCard/BaseCard.stories.tsx | 48 +++++++++ src/components/BaseCard/index.css | 14 +++ src/components/BaseCard/index.tsx | 97 +++++++++++++++++++ .../ProgramCard/ProgramCard.stories.tsx | 2 +- src/components/index.css | 1 + src/components/index.tsx | 1 + 6 files changed, 162 insertions(+), 1 deletion(-) create mode 100644 src/components/BaseCard/BaseCard.stories.tsx create mode 100644 src/components/BaseCard/index.css create mode 100644 src/components/BaseCard/index.tsx diff --git a/src/components/BaseCard/BaseCard.stories.tsx b/src/components/BaseCard/BaseCard.stories.tsx new file mode 100644 index 0000000..012dc02 --- /dev/null +++ b/src/components/BaseCard/BaseCard.stories.tsx @@ -0,0 +1,48 @@ +import React from 'react'; +// also exported from '@storybook/react' if you can deal with breaking changes in 6.1 +import { Story, Meta } from '@storybook/react/types-6-0'; +import { BaseCard, BaseCardProps } from '.'; + +export default { + title: 'Components/BaseCard', + component: BaseCard, + argTypes: { + className: { + defaultValue: 'max-w-md', + control: { + type: 'text' + } + }, + imageUrl: { + defaultValue: 'https://fakeimg.pl/370x110/', + control: { + type: 'text' + } + }, + imageAlt: { + defaultValue: 'Image description', + control: { + type: 'text' + } + }, + children: { + defaultValue: 'this is the content of the card', + control: { + type: 'text' + } + } + } +} as Meta; + +/** + * A story that displays a list connector + * + * @param props the story props + * @param props.children the color property set on controls + * @param props.className the classes for element + * @param props.imageUrl the image url set on controls + * @param props.imageAlt the image url set on controls + */ +const Template: Story = ({ ...props }) => ; + +export const Default = Template.bind({}); diff --git a/src/components/BaseCard/index.css b/src/components/BaseCard/index.css new file mode 100644 index 0000000..3ccd34b --- /dev/null +++ b/src/components/BaseCard/index.css @@ -0,0 +1,14 @@ +@layer components { + .pui-baseCard { + /* Adds the expected placeholder color for the bg */ + @apply flex w-full pui-rounded-Card overflow-hidden pui-boxshadow-lg; + } + + .pui-rounded-gradient-bar { + border-radius: var(--pui-rounded-gradient-bar, 0.75rem 0 0 0.75rem); + } + + .gradient-bar { + @apply w-2.5 h-auto min-h-full block pui-rounded-gradient-bar; + } +} diff --git a/src/components/BaseCard/index.tsx b/src/components/BaseCard/index.tsx new file mode 100644 index 0000000..9bcdd82 --- /dev/null +++ b/src/components/BaseCard/index.tsx @@ -0,0 +1,97 @@ +import React from 'react'; +import classnames from 'classnames'; + +export type BaseCardProps = { + /** + * Show gradient background for the card image + * + * @default true + */ + imageGradient?: boolean; + /** + * Show left gradient bar on the card + * + * @default true + */ + leftGradientBar?: boolean; + /** + * Card Image url + * + * @default string + */ + imageUrl?: string; + /** + * Card title + * + * @default string + */ + imageAlt?: string; + /** + * Extended classes + * + * @default string + */ + className: string; + /** + * Extended classes for content + * + * @default string; + */ + classNameContent?: string; + /** + * Extended classes for filter + * + * @default string + */ + classNameGradientImage?: string; +}; + +/** + * A Percentage Circle + * + * @param props The input props + * @param props.imageGradient The gradient background over the image + * @param props.leftGradientBar The left gradient bar on the card + * @param props.imageUrl Set the image for the card + * @param props.imageAlt Set the title for the card + * @param props.className The input className + * @param props.classNameContent The content on the card className + * @param props.classNameGradientImage The filter className + * @param props.children The content of the card + + */ +export const BaseCard: React.FC = ({ + imageGradient, + leftGradientBar, + imageUrl, + imageAlt, + children, + className, + classNameContent, + classNameGradientImage +}) => { + return ( +
+ {leftGradientBar && ( +
+ )} +
+ {imageUrl && ( +
+ {imageAlt} + + {imageGradient && ( +
+ )} +
+ )} +
{children}
+
+
+ ); +}; diff --git a/src/components/ProgramCard/ProgramCard.stories.tsx b/src/components/ProgramCard/ProgramCard.stories.tsx index dac4db9..ee7d497 100644 --- a/src/components/ProgramCard/ProgramCard.stories.tsx +++ b/src/components/ProgramCard/ProgramCard.stories.tsx @@ -39,7 +39,7 @@ export default { type: 'text' } }, - buttonpercentage: { + buttonPercentage: { defaultValue: 'View more CTA', control: { type: 'text' diff --git a/src/components/index.css b/src/components/index.css index 2e578fc..38341d7 100644 --- a/src/components/index.css +++ b/src/components/index.css @@ -30,3 +30,4 @@ @import './ResourcesCard'; @import './ExpertCard'; @import './ProgramCard'; +@import './BaseCard'; diff --git a/src/components/index.tsx b/src/components/index.tsx index f608202..f8bd328 100644 --- a/src/components/index.tsx +++ b/src/components/index.tsx @@ -22,3 +22,4 @@ export * from './WorkSessionCard'; export * from './ResourcesCard'; export * from './ExpertCard'; export * from './ProgramCard'; +export * from './BaseCard'; From f12b67c4a1e61e3e7533c2d500550a067b915403 Mon Sep 17 00:00:00 2001 From: Diego Gonzalez Date: Wed, 16 Feb 2022 09:12:46 -0500 Subject: [PATCH 2/5] feat: add a base card element --- src/components/BaseCard/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/BaseCard/index.tsx b/src/components/BaseCard/index.tsx index 9bcdd82..e21725e 100644 --- a/src/components/BaseCard/index.tsx +++ b/src/components/BaseCard/index.tsx @@ -58,7 +58,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 - + */ export const BaseCard: React.FC = ({ imageGradient, From 92fbbaab59f4880c2390ea23b1e6bc684c48a6cd Mon Sep 17 00:00:00 2001 From: Diego Gonzalez Date: Wed, 16 Feb 2022 10:07:46 -0500 Subject: [PATCH 3/5] feat: add a base card element CHANGELOG --- CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 24dc209..ebac656 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 +- Add Base card element + ### Fixed ## [3.4.5] 2022-01-26 From e79f4062d9fcf7cb6a5cb5e22852e3896f19d6b8 Mon Sep 17 00:00:00 2001 From: Diego Gonzalez Date: Wed, 16 Feb 2022 10:14:41 -0500 Subject: [PATCH 4/5] build: bumping version: 3.4.6 --- CHANGELOG.md | 8 ++++++++ package.json | 2 +- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index ebac656..6d9bae4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -23,10 +23,18 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Added +### Fixed + +## [3.4.6] 2022-02-16 + +### Added + - Add Base card element ### Fixed +- fix HTML console error

wrapping a

element on module cards + ## [3.4.5] 2022-01-26 ### Changes diff --git a/package.json b/package.json index d4ba860..a613405 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@perimetre/ui", "description": "A component library made by @perimetre", - "version": "3.4.5", + "version": "3.4.6", "repository": { "type": "git", "url": "git+https://github.com/perimetre/ui.git" From d8a16b2c61cf21020186057e770943cc3818d87a Mon Sep 17 00:00:00 2001 From: Diego Gonzalez Date: Wed, 16 Feb 2022 10:22:16 -0500 Subject: [PATCH 5/5] fix: html console error on module card --- src/components/ModuleCard/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ModuleCard/index.tsx b/src/components/ModuleCard/index.tsx index e8562d7..16b061b 100644 --- a/src/components/ModuleCard/index.tsx +++ b/src/components/ModuleCard/index.tsx @@ -111,7 +111,7 @@ export const ModuleCard: React.FC = ({

{title}

-

{content}

+
{content}