Merge pull request #56 from perimetre/3.4.3

3.4.3

CHANGELOG.md

@@ -25,6 +25,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
+## [3.4.3] 2022-01-24
+
+### Fixed
+
+- Add tags to event cards and fix sponsor image sizes
+
 ## [3.4.2] 2022-01-18
 
 ### Fixed

package.json

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

src/components/EventCard/EventCard.stories.tsx

@@ -14,7 +14,7 @@ export default {
       }
     },
     imageUrl: {
-      defaultValue: 'https://fakeimg.pl/105x30/',
+      defaultValue: 'https://fakeimg.pl/130x50/',
       control: {
         type: 'text'
       }
@@ -70,12 +70,24 @@ export default {
         type: 'select',
         options: gradientViaClassNameMap
       }
+    },
+    tags: {
+      defaultValue: 'Translate, Positioning, Export, Shipping',
+      control: {
+        type: 'text'
+      }
+    },
+    tagsLabel: {
+      defaultValue: 'Tags',
+      control: {
+        type: 'text'
+      }
     }
   }
 } as Meta;
 
 /**
- * A story that displays a list connector
+ * A story that displays a Event card
  *
  * @param props the story props
  * @param props.color the color property set on controls

src/components/EventCard/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import classnames from 'classnames';
-import { ArrowIcon, CalendarIcon } from '..';
+import { ArrowIcon, CalendarIcon, TagsIcon } from '..';
 
 export type EventCardProps = {
   /**
@@ -50,6 +50,18 @@ export type EventCardProps = {
    *
    * @default string
    */
+  tags?: string;
+  /**
+   * Events Tags
+   *
+   * @default string
+   */
+  tagsLabel?: string;
+  /**
+   * Events Tags
+   *
+   * @default string
+   */
   gradientInitialColor?: string;
   /**
    * Gradient bar initial color value if needed
@@ -79,6 +91,8 @@ export type EventCardProps = {
  * @param props.gradientInitialColor The gradient bar initial color value
  * @param props.gradientMiddleColor The input className
  * @param props.gradientFinalColor The input className
+ * @param props.tagsLabel The Events tags label
+ * @param props.tags The Events tags
  */
 export const EventCard: React.FC<EventCardProps> = ({
   imageUrl,
@@ -90,7 +104,9 @@ export const EventCard: React.FC<EventCardProps> = ({
   className,
   gradientInitialColor,
   gradientMiddleColor,
-  gradientFinalColor
+  gradientFinalColor,
+  tags,
+  tagsLabel
 }) => {
   return (
     <div className={classnames('pui-event-card', className)}>
@@ -108,10 +124,24 @@ export const EventCard: React.FC<EventCardProps> = ({
         <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-start items-center w-full mb-6">
+          <TagsIcon className="text-pui-primary" />
+          <p className="ml-2">
+            <b>{tagsLabel}</b>: {tags}
+          </p>
+        </div>
         <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
+              style={{
+                backgroundImage: `url(${imageUrl})`,
+                backgroundSize: 'contain',
+                backgroundRepeat: 'no-repeat',
+                backgroundPosition: 'center left'
+              }}
+              className="h-12 w-32 bg-contain bg-no-repeat"
+            />
           </div>
           <span className="inline-flex items-center pui-chip-bordered h-8 justify-items-end cursor-pointer font-bold">
             {buttonContent}

src/components/Icons/Singletone/TagsIcon.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import classnames from 'classnames';
+
+/**
+ * Tags icon to use with JSX
+ *
+ * @param props the icon props
+ * @param props.className the icon classname value
+ */
+export const TagsIcon: React.FC<React.SVGProps<SVGSVGElement>> = ({ className, ...props }) => (
+  <svg width="24" height="20" viewBox="0 0 24 20" {...props} className={classnames('fill-current', className)}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M24 11.1129C24 11.3571 23.9016 11.5911 23.7271 11.7625L16.4484 18.911C16.2694 19.0869 16.0365 19.1745 15.8033 19.1745C15.5666 19.1745 15.3298 19.084 15.15 18.9029C14.7939 18.5442 14.7976 17.9661 15.1581 17.6119L21.7752 11.1129L12.6858 2.18596C12.3253 1.83169 12.3213 1.25359 12.6777 0.894625C13.0341 0.535919 13.6153 0.532267 13.9761 0.886537L23.7271 10.4633C23.9016 10.6347 24 10.8687 24 11.1129ZM6.77772 4.48454C7.06886 4.77412 7.23687 5.17847 7.23687 5.59066C7.23687 6.00284 7.06886 6.4072 6.77772 6.69678C6.48398 6.98896 6.07753 7.15592 5.663 7.15592C5.24847 7.15592 4.84463 6.98896 4.55088 6.69678C4.25974 6.4072 4.09174 6.00284 4.09174 5.59066C4.09174 5.17847 4.25974 4.77412 4.55088 4.48454C4.84463 4.19236 5.24847 4.0254 5.663 4.0254C6.07753 4.0254 6.48398 4.19236 6.77772 4.48454ZM11.3023 16.7948L2.57259 8.22106L2.17475 2.16037L8.37213 2.55273L17.0878 11.1129L11.3023 16.7948ZM19.6298 11.1129C19.6298 10.834 19.5173 10.5664 19.3178 10.3704L9.56699 0.793658C9.38698 0.617045 9.14906 0.510868 8.89653 0.494955L1.11615 0.00215887C0.815361 -0.017146 0.520049 0.0937265 0.306913 0.306341C0.0937766 0.518695 -0.0173568 0.812181 0.00220894 1.11167L0.504135 8.75274C0.520832 9.00762 0.631182 9.24789 0.814057 9.42737L10.5648 19.0039C10.7691 19.2045 11.0355 19.3049 11.3018 19.3049C11.5684 19.3049 11.8348 19.2045 12.0391 19.0039L19.3178 11.8553C19.5173 11.6594 19.6298 11.392 19.6298 11.1129Z"
+    />
+  </svg>
+);
+
+/**
+ * Tags icon to use with CSS
+ */
+export const TagsIconURL = `url('data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2220%22%20viewBox%3D%220%200%2024%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M24%2011.1129C24%2011.3571%2023.9016%2011.5911%2023.7271%2011.7625L16.4484%2018.911C16.2694%2019.0869%2016.0365%2019.1745%2015.8033%2019.1745C15.5666%2019.1745%2015.3298%2019.084%2015.15%2018.9029C14.7939%2018.5442%2014.7976%2017.9661%2015.1581%2017.6119L21.7752%2011.1129L12.6858%202.18596C12.3253%201.83169%2012.3213%201.25359%2012.6777%200.894625C13.0341%200.535919%2013.6153%200.532267%2013.9761%200.886537L23.7271%2010.4633C23.9016%2010.6347%2024%2010.8687%2024%2011.1129ZM6.77772%204.48454C7.06886%204.77412%207.23687%205.17847%207.23687%205.59066C7.23687%206.00284%207.06886%206.4072%206.77772%206.69678C6.48398%206.98896%206.07753%207.15592%205.663%207.15592C5.24847%207.15592%204.84463%206.98896%204.55088%206.69678C4.25974%206.4072%204.09174%206.00284%204.09174%205.59066C4.09174%205.17847%204.25974%204.77412%204.55088%204.48454C4.84463%204.19236%205.24847%204.0254%205.663%204.0254C6.07753%204.0254%206.48398%204.19236%206.77772%204.48454ZM11.3023%2016.7948L2.57259%208.22106L2.17475%202.16037L8.37213%202.55273L17.0878%2011.1129L11.3023%2016.7948ZM19.6298%2011.1129C19.6298%2010.834%2019.5173%2010.5664%2019.3178%2010.3704L9.56699%200.793658C9.38698%200.617045%209.14906%200.510868%208.89653%200.494955L1.11615%200.00215887C0.815361%20-0.017146%200.520049%200.0937265%200.306913%200.306341C0.0937766%200.518695%20-0.0173568%200.812181%200.00220894%201.11167L0.504135%208.75274C0.520832%209.00762%200.631182%209.24789%200.814057%209.42737L10.5648%2019.0039C10.7691%2019.2045%2011.0355%2019.3049%2011.3018%2019.3049C11.5684%2019.3049%2011.8348%2019.2045%2012.0391%2019.0039L19.3178%2011.8553C19.5173%2011.6594%2019.6298%2011.392%2019.6298%2011.1129Z%22%2F%3E%3C%2Fsvg%3E')`;

src/components/Icons/index.tsx

@@ -11,3 +11,4 @@ export * from './Singletone/SearchIcon';
 export * from './Singletone/StarIcon';
 export * from './Singletone/ArrowIcon';
 export * from './Singletone/CalendarIcon';
+export * from './Singletone/TagsIcon';

src/components/ResourcesCard/ResourcesCard.stories.tsx

@@ -38,15 +38,10 @@ export default {
  * 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.advisorTitle the title for the advisor
- * @param props.advisorName the advisor name
- * @param props.buttonLabel the label for the action button
- * @param props.counter the label for the action button
  */
 const Template: Story<ResourcesCardProps & { color?: string }> = ({ ...props }) => <ResourcesCard {...props} />;