diff --git a/CHANGELOG.md b/CHANGELOG.md index d6ecfcd..7d94bd2 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/package.json b/package.json index bb059cb..08c4aab 100644 --- a/package.json +++ b/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" diff --git a/src/components/EventCard/EventCard.stories.tsx b/src/components/EventCard/EventCard.stories.tsx index 44c9913..971cb4e 100644 --- a/src/components/EventCard/EventCard.stories.tsx +++ b/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 diff --git a/src/components/EventCard/index.tsx b/src/components/EventCard/index.tsx index edbc4f7..ade71f9 100644 --- a/src/components/EventCard/index.tsx +++ b/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 = ({ imageUrl, @@ -90,7 +104,9 @@ export const EventCard: React.FC = ({ className, gradientInitialColor, gradientMiddleColor, - gradientFinalColor + gradientFinalColor, + tags, + tagsLabel }) => { return (
@@ -108,10 +124,24 @@ export const EventCard: React.FC = ({ {date}

{title}

{content}

+
+ +

+ {tagsLabel}: {tags} +

+

{sponsorLabel}

- +
{buttonContent} diff --git a/src/components/Icons/Singletone/TagsIcon.tsx b/src/components/Icons/Singletone/TagsIcon.tsx new file mode 100644 index 0000000..523bfee --- /dev/null +++ b/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> = ({ className, ...props }) => ( + + + +); + +/** + * 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')`; diff --git a/src/components/Icons/index.tsx b/src/components/Icons/index.tsx index a73044c..5a122d0 100644 --- a/src/components/Icons/index.tsx +++ b/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'; diff --git a/src/components/ResourcesCard/ResourcesCard.stories.tsx b/src/components/ResourcesCard/ResourcesCard.stories.tsx index d46e69b..cd0ec9c 100644 --- a/src/components/ResourcesCard/ResourcesCard.stories.tsx +++ b/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 = ({ ...props }) => ;