Merge pull request #53 from perimetre/3.4.0

3.4.0

CHANGELOG.md

@@ -25,7 +25,21 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
-## [3.3.0]
+## [3.4.0] 2022-01-10
+
+### Added
+
+- Add percentage cicles component
+- Add percentage list connector component
+- Add percentage card Banners component
+- Add percentage cirlces component
+- Add images with gradient border component
+- Add expert cards
+- Add Event cards
+- Add Program cards
+- Add Resources cards
+
+## [3.3.0] 2021-12-08
 
 ### Fixed
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@perimetre/ui",
   "description": "A component library made by @perimetre",
-  "version": "3.3.0",
+  "version": "3.4.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/perimetre/ui.git"

src/components/BorderRadius/index.css

@@ -3,4 +3,12 @@
     /* Default border radius */
     border-radius: var(--pui-default-radius, 0.25rem);
   }
+
+  .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);
+  }
 }

src/components/BoxShadow/index.css

@@ -0,0 +1,14 @@
+@layer base {
+  .pui-boxshadow-sm {
+    /* Default border radius */
+    box-shadow: var(--pui-boxshadow-sm, 0 1px 5px 1px rgba(0, 0, 0, 0.1));
+  }
+
+  .pui-boxshadow-md {
+    box-shadow: var(--pui-boxshadow-md, 2px 4px 10px 0 rgba(0, 0, 0, 0.1));
+  }
+
+  .pui-boxshadow-lg {
+    box-shadow: var(--pui-boxshadow-lg, 3px 6px 20px 0 rgba(0, 0, 0, 0.1));
+  }
+}

src/components/CardBanner/CardBadge.stories.tsx

@@ -0,0 +1,82 @@
+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 { colorOptions, weightOptions } from '../../prebuiltTailwindTheme';
+import { StarIcon } from '../Icons';
+import classnames from 'classnames';
+import { fontWeightClassnameMap, puiColorClassnameMap, textColorClassnameMap } from '../../storybookMappers';
+
+export default {
+  title: 'Components/CardBadge',
+  argTypes: {
+    color: {
+      defaultValue: 'pui-primary',
+      control: {
+        type: 'select',
+        options: colorOptions
+      }
+    },
+    text: {
+      control: {
+        type: 'select',
+        options: colorOptions
+      }
+    },
+    weight: {
+      control: {
+        defaultValue: 'normal',
+        type: 'select',
+        options: weightOptions
+      }
+    },
+    content: {
+      defaultValue: 'Recommended',
+      control: {
+        type: 'text'
+      }
+    },
+    className: {
+      control: {
+        type: 'text'
+      }
+    }
+  }
+} as Meta;
+
+/**
+ * A story that displays an alert example
+ *
+ * @param props the story props
+ * @param props.color the color property set on controls
+ * @param props.text the text property set on controls
+ * @param props.content the content property set on controls
+ * @param props.className the component classes
+ * @param props.weight the weight property set on controls
+ */
+const Template: Story = ({ color, content, text, weight, className, ...props }) => (
+  <div
+    {...props}
+    className={classnames(
+      'pui-cardBadge',
+      {
+        [puiColorClassnameMap[color]]: color !== 'pui-primary',
+        [textColorClassnameMap[text]]: text && text.length > 0,
+        [fontWeightClassnameMap[weight]]: weight && weight.length > 0
+      },
+      'inline-flex items-center',
+      className
+    )}
+  >
+    <div>
+      <StarIcon width={14} height={14} className="mr-2" />
+    </div>
+    <div>{content}</div>
+  </div>
+);
+
+export const Default = Template.bind({});
+
+export const Locked = Template.bind({});
+Locked.args = {
+  color: 'gray-300'
+};

src/components/CardBanner/index.css

@@ -0,0 +1,8 @@
+@layer components {
+  .pui-cardBadge {
+    /* Adds default card border radius */
+    /* Adds default text color in uneven backgrounds */
+    /* Adds the expected placeholder color for the bg */
+    @apply pl-4 pr-7 py-2 -mb-6 text-sm pui-rounded-bannerCard text-pui-paragraph-0 bg-pui-placeholder-color;
+  }
+}

src/components/EventCard/EventCard.stories.tsx

@@ -0,0 +1,92 @@
+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 { EventCard, EventCardProps } from '.';
+import { gradientFromClassNameMap, gradientToClassNameMap, gradientViaClassNameMap } from '../../storybookMappers';
+
+export default {
+  title: 'Components/EventCard',
+  component: EventCard,
+  argTypes: {
+    className: {
+      control: {
+        type: 'text'
+      }
+    },
+    imageUrl: {
+      defaultValue: 'https://fakeimg.pl/105x30/',
+      control: {
+        type: 'text'
+      }
+    },
+    title: {
+      defaultValue: 'This is a title',
+      control: {
+        type: 'text'
+      }
+    },
+    content: {
+      defaultValue:
+        'Here goes the content or description of the card Prepare your business to begin exporting successfully by creating an export action plan with your advisor. Prepare your business.',
+      control: {
+        type: 'text'
+      }
+    },
+    buttonContent: {
+      defaultValue: 'View more CTA',
+      control: {
+        type: 'text'
+      }
+    },
+    date: {
+      defaultValue: '05 - dec - 2022',
+      control: {
+        type: 'text'
+      }
+    },
+    sponsorLabel: {
+      defaultValue: 'Sponsor by:',
+      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;
+
+/**
+ * A story that displays a list connector
+ *
+ * @param props the story props
+ * @param props.color the color property set on controls
+ * @param props.className the classes for element
+ * @param props.imageUrl the image url for the sponsor logo
+ * @param props.title card title
+ * @param props.content card description
+ * @param props.date the event date
+ * @param props.sponsorLabel the label for the sponsor logo
+ * @param props.buttonLabel the label for the action button
+ */
+const Template: Story<EventCardProps & { color?: string }> = ({ ...props }) => <EventCard {...props} />;
+
+export const Default = Template.bind({});

src/components/EventCard/index.css

@@ -0,0 +1,22 @@
+@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;
+  }
+
+  .pui-rounded-gradient-bar {
+    border-radius: var(--pui-rounded-gradient-bar, 0.75rem 0 0 0.75rem);
+  }
+
+  .gradient-bar {
+    @apply w-3 h-auto min-h-full block pui-rounded-gradient-bar;
+  }
+
+  .sponsor {
+    @apply flex flex-row items-center justify-between;
+  }
+
+  .icon {
+    @apply text-pui-placeholder-color;
+  }
+}

src/components/EventCard/index.tsx

@@ -0,0 +1,124 @@
+import React from 'react';
+import classnames from 'classnames';
+import { ArrowIcon, CalendarIcon } from '..';
+
+export type EventCardProps = {
+  /**
+   * Card Image url
+   *
+   * @default string
+   */
+  imageUrl?: string;
+  /**
+   * Event tilte
+   *
+   * @default string
+   */
+  title?: string;
+  /**
+   * Event description
+   *
+   * @default string
+   */
+  content?: string;
+  /**
+   * Card button label
+   *
+   * @default string
+   */
+  buttonContent?: string;
+  /**
+   * Sponsor Image label
+   *
+   * @default string
+   */
+  sponsorLabel?: string;
+  /**
+   * Event date
+   *
+   * @default string
+   */
+  date?: string;
+  /**
+   * Extended classes
+   *
+   * @default string
+   */
+  className?: string;
+  /**
+   * 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;
+};
+
+/**
+ * A Percentage Circle
+ *
+ * @param props The input props
+ * @param props.date The event date
+ * @param props.title Set the event title
+ * @param props.content Set the event text content
+ * @param props.buttonContent Set the button label
+ * @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
+ */
+export const EventCard: React.FC<EventCardProps> = ({
+  imageUrl,
+  title,
+  content,
+  buttonContent,
+  date,
+  sponsorLabel,
+  className,
+  gradientInitialColor,
+  gradientMiddleColor,
+  gradientFinalColor
+}) => {
+  return (
+    <div className={classnames('pui-event-card', className)}>
+      <div
+        className={classnames(
+          'gradient-bar',
+          `bg-gradient-to-b ${gradientInitialColor} ${gradientMiddleColor} ${gradientFinalColor}`,
+          className
+        )}
+      ></div>
+      <div className="icon-wrapper py-6 ml-6">
+        <CalendarIcon className="icon h-6 w-6 pui-color-pui-primary" />
+      </div>
+      <div className="p-6 pl-4 w-full text-pui-paragraph-900">
+        <span className="text-base font-medium mb-3 inline-block">{date}</span>
+        <h4 className="text-lg font-bold mb-3">{title}</h4>
+        <p className="text-base mb-6 font-normal">{content}</p>
+        <div className="inline-flex justify-between items-center w-full p-0">
+          <div className="sponsor">
+            <p className="text-sm font-normal mr-2 min-w-20">{sponsorLabel}</p>
+            <img src={imageUrl} alt="" className="w-full max-h-10" />
+          </div>
+          <span className="inline-flex items-center pui-chip-bordered h-8 justify-items-end cursor-pointer">
+            {buttonContent}
+            <ArrowIcon className="h-4 w-4 ml-2" />
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};