Merge pull request #59 from perimetre/3.4.6

3.4.6

CHANGELOG.md

@@ -25,6 +25,16 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
+## [3.4.6] 2022-02-16
+
+### Added
+
+- Add Base card element
+
+### Fixed
+
+- fix HTML console error <p> wrapping a <div> element on module cards
+
 ## [3.4.5] 2022-01-26
 
 ### Changes

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"

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<BaseCardProps & { color?: string }> = ({ ...props }) => <BaseCard {...props} />;
+
+export const Default = Template.bind({});

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;
+  }
+}

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<BaseCardProps> = ({
+  imageGradient,
+  leftGradientBar,
+  imageUrl,
+  imageAlt,
+  children,
+  className,
+  classNameContent,
+  classNameGradientImage
+}) => {
+  return (
+    <div className={classnames('pui-baseCard', className)}>
+      {leftGradientBar && (
+        <div className={classnames('gradient-bar', `bg-gradient-to-b from-pui-primary to-pui-secondary`)}></div>
+      )}
+      <div className="flex flex-col w-full">
+        {imageUrl && (
+          <div className="w-full h-28 overflow-hidden relative">
+            <img src={imageUrl} alt={imageAlt} className="w-full h-full" />
+
+            {imageGradient && (
+              <div
+                className={classnames(
+                  'absolute opacity-25 z-10 inset-0 w-full h-full bg-gradient-to-r from-pui-primary to-pui-secondary',
+                  classNameGradientImage
+                )}
+              />
+            )}
+          </div>
+        )}
+        <div className={classnames('flex flex-col flex-1 p-6', classNameContent)}>{children}</div>
+      </div>
+    </div>
+  );
+};

src/components/ModuleCard/index.tsx

@@ -111,7 +111,7 @@ export const ModuleCard: React.FC<ModuleCardProps> = ({
       </div>
       <div className="flex flex-col flex-1 p-6">
         <h4 className={classnames('text-lg font-bold mb-3', classNameTitle)}>{title}</h4>
-        <p className={classnames('text-base mb-6 font-normal', classNameContent)}>{content}</p>
+        <div className={classnames('text-base mb-6 font-normal', classNameContent)}>{content}</div>
         <div className="flex-1 inline-flex justify-end items-end w-full">
           <button
             onClick={onPressButton}

src/components/index.css

@@ -30,3 +30,4 @@
 @import './ResourcesCard';
 @import './ExpertCard';
 @import './ProgramCard';
+@import './BaseCard';

src/components/index.tsx

@@ -22,3 +22,4 @@ export * from './WorkSessionCard';
 export * from './ResourcesCard';
 export * from './ExpertCard';
 export * from './ProgramCard';
+export * from './BaseCard';