diff --git a/package.json b/package.json index c767a5d6..25bb4124 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@code4rena/components-library", - "version": "3.1.2", + "version": "3.2.0", "description": "Code4rena's official components library ", "types": "./dist/lib.d.ts", "exports": { diff --git a/src/lib/ContestTile/CompactTemplate.tsx b/src/lib/ContestTile/CompactTemplate.tsx index 10b43f7d..dba624b5 100644 --- a/src/lib/ContestTile/CompactTemplate.tsx +++ b/src/lib/ContestTile/CompactTemplate.tsx @@ -62,13 +62,8 @@ const IsContest = ({title, isDarkTile = true, contestData, sponsorUrl, sponsorIm const [contestTimelineObject, setContestTimelineObject] = useState(); const [hasBotRace, setHasBotRace] = useState(contestData ? !!contestData.botFindingsRepo : false); let ecosystemLogoName: string = ""; - const evmTypes = new Set([ - "EVM", "Ethereum", "Arbitrum", "Avax", "BSC", "Optimism", "Polygon", "zkSync" - ]); if (ecosystem && (ecosystem === "Polkadot")) { ecosystemLogoName = 'logo-polkadot' - } else if (evmTypes.has(ecosystem ?? "")) { - ecosystemLogoName = 'logo-ethereum'; } const updateContestTileStatus = useCallback(() => { @@ -193,13 +188,8 @@ const IsBounty = ({title, isDarkTile = true, bountyData, sponsorUrl, sponsorImag }) => { const { amount, bountyUrl, ecosystem, languages } = bountyData; let ecosystemLogoName: string = ""; - const evmTypes = new Set([ - "EVM", "Ethereum", "Arbitrum", "Avax", "BSC", "Optimism", "Polygon", "zkSync" - ]); if (ecosystem && (ecosystem === "Polkadot")) { ecosystemLogoName = 'logo-polkadot' - } else if (evmTypes.has(ecosystem ?? "")) { - ecosystemLogoName = 'logo-ethereum'; } return ( diff --git a/src/lib/ContestTile/DefaultTemplate.tsx b/src/lib/ContestTile/DefaultTemplate.tsx index 956c4035..659e7c52 100644 --- a/src/lib/ContestTile/DefaultTemplate.tsx +++ b/src/lib/ContestTile/DefaultTemplate.tsx @@ -253,13 +253,8 @@ function IsContest({ }) { const { contestUrl, amount, findingsRepo, startDate, endDate, ecosystem, languages } = contestData; let ecosystemLogoName: string = ""; - const evmTypes = new Set([ - "EVM", "Ethereum", "Arbitrum", "Avax", "BSC", "Optimism", "Polygon", "zkSync" - ]); if (ecosystem && (ecosystem === "Polkadot")) { ecosystemLogoName = 'logo-polkadot' - } else if (evmTypes.has(ecosystem ?? "")) { - ecosystemLogoName = 'logo-ethereum'; } return ( @@ -408,13 +403,8 @@ function IsBounty({ const { bountyUrl, amount, startDate, ecosystem, languages } = bountyData; const endDate = "2999-01-01T00:00:00Z" let ecosystemLogoName: string = ""; - const evmTypes = new Set([ - "EVM", "Ethereum", "Arbitrum", "Avax", "BSC", "Optimism", "Polygon", "zkSync" - ]); if (ecosystem && (ecosystem === "Polkadot")) { ecosystemLogoName = 'logo-polkadot' - } else if (evmTypes.has(ecosystem ?? "")) { - ecosystemLogoName = 'logo-ethereum'; } return ( diff --git a/src/lib/Icon/iconList.tsx b/src/lib/Icon/iconList.tsx index a1ec991b..3f829896 100644 --- a/src/lib/Icon/iconList.tsx +++ b/src/lib/Icon/iconList.tsx @@ -73,8 +73,7 @@ export const icons = (size: string, color: string, className?: string): Record - - , + , "chevrons-right": @@ -87,6 +86,10 @@ export const icons = (size: string, color: string, className?: string): Record , + "copy": + + + , "download": @@ -118,6 +121,9 @@ export const icons = (size: string, color: string, className?: string): Record , + "facebook": + + , "findings": @@ -197,6 +203,9 @@ export const icons = (size: string, color: string, className?: string): Record , + "linkedin": + + , "lock": @@ -209,6 +218,9 @@ export const icons = (size: string, color: string, className?: string): Record , + "logo-blast": + + , "logo-ethereum": , @@ -220,6 +232,9 @@ export const icons = (size: string, color: string, className?: string): Record , + "logo-polygon": + + , "menu": @@ -316,6 +331,9 @@ export const icons = (size: string, color: string, className?: string): Record , + "twitter": + + , "user": diff --git a/src/lib/Tag/Tag.scss b/src/lib/Tag/Tag.scss index d2b05b31..698f9b88 100644 --- a/src/lib/Tag/Tag.scss +++ b/src/lib/Tag/Tag.scss @@ -9,7 +9,7 @@ letter-spacing: 0.5px; display: flex; flex-direction: row; - gap: $spacing__xs; + gap: $spacing__s; align-items: center; color: $color__white; border-radius: 2.25rem; @@ -31,6 +31,7 @@ .icon { padding-left: 0.5rem; + margin-right: -0.25rem; svg { display: block; diff --git a/src/lib/Tag/Tag.stories.tsx b/src/lib/Tag/Tag.stories.tsx index dd1cfb44..e32671d3 100644 --- a/src/lib/Tag/Tag.stories.tsx +++ b/src/lib/Tag/Tag.stories.tsx @@ -1,5 +1,6 @@ import React from "react"; import { Tag } from "./Tag"; +import { Icon } from "../Icon"; import { Meta, StoryObj } from "@storybook/react"; import { TagSize, TagVariant } from "./Tag.types"; @@ -10,6 +11,15 @@ const meta: Meta = { argTypes: { variant: { control: "select" }, size: { control: "select" }, + iconLeft: { + control: "select", + options: ["None", "Image Url", "Icon"], + mapping: { + "None": undefined, + "Image Url": '/icons/wolfbot.svg', + "Icon": + }, + } }, }; export default meta; @@ -25,8 +35,8 @@ SampleComponent.parameters = { SampleComponent.args = { variant: TagVariant.DEFAULT, label: "Private", - iconLeft: "/icons/lock.svg", size: TagSize.NARROW, className: "", id: "", + iconLeft: undefined }; diff --git a/src/lib/Tag/Tag.tsx b/src/lib/Tag/Tag.tsx index 606210e5..b8c6ac81 100644 --- a/src/lib/Tag/Tag.tsx +++ b/src/lib/Tag/Tag.tsx @@ -24,7 +24,7 @@ import "./Tag.scss"; export const Tag: React.FC = ({ variant = TagVariant.DEFAULT, size = TagSize.NARROW, - iconLeft = "", + iconLeft = undefined, label, className = "", id = "",