diff --git a/.changeset/shiny-pillows-check.md b/.changeset/shiny-pillows-check.md new file mode 100644 index 0000000000..7654970eb6 --- /dev/null +++ b/.changeset/shiny-pillows-check.md @@ -0,0 +1,5 @@ +--- +'@toptal/picasso-pictograms': minor +--- + +- add pictograms (`BoxArchiveEmptyStateBacklog`, `PeopleReferralInviteEmptyState`, `ScanHeatmapSiteResearchTest`) diff --git a/README.md b/README.md index e6fb58bbe0..f163bf1db4 100644 --- a/README.md +++ b/README.md @@ -101,7 +101,7 @@ To add a new icon to `@toptal/picasso` or pictogram to `@toptal/picasso-pictogra 1. Prepare your SVG: - Make sure that it has `viewBox` attribute specified - Make sure that `viewBox` sizes are `0 0 16 16` and `0 0 24 24` for icon (there should always be two icon variants) and `0 0 64 64` for pictogram (be careful this isn't just a simple value set!) - - Make sure all paths are expanded and strokes are not used + - Make sure all paths are expanded and strokes are not used (use [this](https://iconly.io/tools/svg-convert-stroke-to-fill) or [this](https://svgomg.net/) online tools) 2. Add your SVG file(s) to the Picasso project: ```bash diff --git a/packages/picasso-pictograms/src/Pictogram/BoxArchiveEmptyStateBacklogBlue64.tsx b/packages/picasso-pictograms/src/Pictogram/BoxArchiveEmptyStateBacklogBlue64.tsx new file mode 100644 index 0000000000..f539562bc5 --- /dev/null +++ b/packages/picasso-pictograms/src/Pictogram/BoxArchiveEmptyStateBacklogBlue64.tsx @@ -0,0 +1,67 @@ +import type { Ref } from 'react' +import React, { forwardRef } from 'react' +import type { StandardProps } from '@toptal/picasso-shared' + +const SIZE = 64 + +type ScaleType = 1 | 2 +export interface Props extends StandardProps { + scale?: ScaleType + base?: number +} +const SvgBoxArchiveEmptyStateBacklogBlue64 = forwardRef( + function SvgBoxArchiveEmptyStateBacklogBlue64( + props: Props, + ref: Ref + ) { + const { className, style = {}, scale, base, 'data-testid': testId } = props + const scaledSize = base || SIZE * Math.ceil(scale || 1) + + const svgStyle = { + minWidth: `${scaledSize}px`, + minHeight: `${scaledSize}px`, + ...style, + } + + return ( + + + + + + + + + + + + + + ) + } +) + +SvgBoxArchiveEmptyStateBacklogBlue64.displayName = + 'SvgBoxArchiveEmptyStateBacklogBlue64' +export default SvgBoxArchiveEmptyStateBacklogBlue64 diff --git a/packages/picasso-pictograms/src/Pictogram/BoxArchiveEmptyStateBacklogWhite64.tsx b/packages/picasso-pictograms/src/Pictogram/BoxArchiveEmptyStateBacklogWhite64.tsx new file mode 100644 index 0000000000..92faa8c698 --- /dev/null +++ b/packages/picasso-pictograms/src/Pictogram/BoxArchiveEmptyStateBacklogWhite64.tsx @@ -0,0 +1,67 @@ +import type { Ref } from 'react' +import React, { forwardRef } from 'react' +import type { StandardProps } from '@toptal/picasso-shared' + +const SIZE = 64 + +type ScaleType = 1 | 2 +export interface Props extends StandardProps { + scale?: ScaleType + base?: number +} +const SvgBoxArchiveEmptyStateBacklogWhite64 = forwardRef( + function SvgBoxArchiveEmptyStateBacklogWhite64( + props: Props, + ref: Ref + ) { + const { className, style = {}, scale, base, 'data-testid': testId } = props + const scaledSize = base || SIZE * Math.ceil(scale || 1) + + const svgStyle = { + minWidth: `${scaledSize}px`, + minHeight: `${scaledSize}px`, + ...style, + } + + return ( + + + + + + + + + + + + + + ) + } +) + +SvgBoxArchiveEmptyStateBacklogWhite64.displayName = + 'SvgBoxArchiveEmptyStateBacklogWhite64' +export default SvgBoxArchiveEmptyStateBacklogWhite64 diff --git a/packages/picasso-pictograms/src/Pictogram/PeopleReferralInviteEmptyStateBlue64.tsx b/packages/picasso-pictograms/src/Pictogram/PeopleReferralInviteEmptyStateBlue64.tsx new file mode 100644 index 0000000000..43d98b8356 --- /dev/null +++ b/packages/picasso-pictograms/src/Pictogram/PeopleReferralInviteEmptyStateBlue64.tsx @@ -0,0 +1,74 @@ +import type { Ref } from 'react' +import React, { forwardRef } from 'react' +import type { StandardProps } from '@toptal/picasso-shared' + +const SIZE = 64 + +type ScaleType = 1 | 2 +export interface Props extends StandardProps { + scale?: ScaleType + base?: number +} +const SvgPeopleReferralInviteEmptyStateBlue64 = forwardRef( + function SvgPeopleReferralInviteEmptyStateBlue64( + props: Props, + ref: Ref + ) { + const { className, style = {}, scale, base, 'data-testid': testId } = props + const scaledSize = base || SIZE * Math.ceil(scale || 1) + + const svgStyle = { + minWidth: `${scaledSize}px`, + minHeight: `${scaledSize}px`, + ...style, + } + + return ( + + + + + + + + + + + + + + + ) + } +) + +SvgPeopleReferralInviteEmptyStateBlue64.displayName = + 'SvgPeopleReferralInviteEmptyStateBlue64' +export default SvgPeopleReferralInviteEmptyStateBlue64 diff --git a/packages/picasso-pictograms/src/Pictogram/PeopleReferralInviteEmptyStateWhite64.tsx b/packages/picasso-pictograms/src/Pictogram/PeopleReferralInviteEmptyStateWhite64.tsx new file mode 100644 index 0000000000..a35e1c6d91 --- /dev/null +++ b/packages/picasso-pictograms/src/Pictogram/PeopleReferralInviteEmptyStateWhite64.tsx @@ -0,0 +1,74 @@ +import type { Ref } from 'react' +import React, { forwardRef } from 'react' +import type { StandardProps } from '@toptal/picasso-shared' + +const SIZE = 64 + +type ScaleType = 1 | 2 +export interface Props extends StandardProps { + scale?: ScaleType + base?: number +} +const SvgPeopleReferralInviteEmptyStateWhite64 = forwardRef( + function SvgPeopleReferralInviteEmptyStateWhite64( + props: Props, + ref: Ref + ) { + const { className, style = {}, scale, base, 'data-testid': testId } = props + const scaledSize = base || SIZE * Math.ceil(scale || 1) + + const svgStyle = { + minWidth: `${scaledSize}px`, + minHeight: `${scaledSize}px`, + ...style, + } + + return ( + + + + + + + + + + + + + + + ) + } +) + +SvgPeopleReferralInviteEmptyStateWhite64.displayName = + 'SvgPeopleReferralInviteEmptyStateWhite64' +export default SvgPeopleReferralInviteEmptyStateWhite64 diff --git a/packages/picasso-pictograms/src/Pictogram/ScanHeatmapSiteResearchTestBlue64.tsx b/packages/picasso-pictograms/src/Pictogram/ScanHeatmapSiteResearchTestBlue64.tsx new file mode 100644 index 0000000000..229665394a --- /dev/null +++ b/packages/picasso-pictograms/src/Pictogram/ScanHeatmapSiteResearchTestBlue64.tsx @@ -0,0 +1,84 @@ +import type { Ref } from 'react' +import React, { forwardRef } from 'react' +import type { StandardProps } from '@toptal/picasso-shared' + +const SIZE = 64 + +type ScaleType = 1 | 2 +export interface Props extends StandardProps { + scale?: ScaleType + base?: number +} +const SvgScanHeatmapSiteResearchTestBlue64 = forwardRef( + function SvgScanHeatmapSiteResearchTestBlue64( + props: Props, + ref: Ref + ) { + const { className, style = {}, scale, base, 'data-testid': testId } = props + const scaledSize = base || SIZE * Math.ceil(scale || 1) + + const svgStyle = { + minWidth: `${scaledSize}px`, + minHeight: `${scaledSize}px`, + ...style, + } + + return ( + + + + + + + + + + + + + + + + + ) + } +) + +SvgScanHeatmapSiteResearchTestBlue64.displayName = + 'SvgScanHeatmapSiteResearchTestBlue64' +export default SvgScanHeatmapSiteResearchTestBlue64 diff --git a/packages/picasso-pictograms/src/Pictogram/ScanHeatmapSiteResearchTestWhite64.tsx b/packages/picasso-pictograms/src/Pictogram/ScanHeatmapSiteResearchTestWhite64.tsx new file mode 100644 index 0000000000..7c0987c709 --- /dev/null +++ b/packages/picasso-pictograms/src/Pictogram/ScanHeatmapSiteResearchTestWhite64.tsx @@ -0,0 +1,84 @@ +import type { Ref } from 'react' +import React, { forwardRef } from 'react' +import type { StandardProps } from '@toptal/picasso-shared' + +const SIZE = 64 + +type ScaleType = 1 | 2 +export interface Props extends StandardProps { + scale?: ScaleType + base?: number +} +const SvgScanHeatmapSiteResearchTestWhite64 = forwardRef( + function SvgScanHeatmapSiteResearchTestWhite64( + props: Props, + ref: Ref + ) { + const { className, style = {}, scale, base, 'data-testid': testId } = props + const scaledSize = base || SIZE * Math.ceil(scale || 1) + + const svgStyle = { + minWidth: `${scaledSize}px`, + minHeight: `${scaledSize}px`, + ...style, + } + + return ( + + + + + + + + + + + + + + + + + ) + } +) + +SvgScanHeatmapSiteResearchTestWhite64.displayName = + 'SvgScanHeatmapSiteResearchTestWhite64' +export default SvgScanHeatmapSiteResearchTestWhite64 diff --git a/packages/picasso-pictograms/src/Pictogram/index.ts b/packages/picasso-pictograms/src/Pictogram/index.ts index 3f3fad9c1c..e56135e387 100644 --- a/packages/picasso-pictograms/src/Pictogram/index.ts +++ b/packages/picasso-pictograms/src/Pictogram/index.ts @@ -43,6 +43,8 @@ export { default as BlockchainBlue64 } from './BlockchainBlue64' export { default as BlockchainWhite64 } from './BlockchainWhite64' export { default as BookOpenBlue64 } from './BookOpenBlue64' export { default as BookOpenWhite64 } from './BookOpenWhite64' +export { default as BoxArchiveEmptyStateBacklogBlue64 } from './BoxArchiveEmptyStateBacklogBlue64' +export { default as BoxArchiveEmptyStateBacklogWhite64 } from './BoxArchiveEmptyStateBacklogWhite64' export { default as BrainCircuitsBlue64 } from './BrainCircuitsBlue64' export { default as BrainCircuitsWhite64 } from './BrainCircuitsWhite64' export { default as BrainIntelligenceBlue64 } from './BrainIntelligenceBlue64' @@ -100,8 +102,12 @@ export { default as CyberLockWhite64 } from './CyberLockWhite64' export { default as DeveloperExpertBlue64 } from './DeveloperExpertBlue64' export { default as HandDeliveryBlue64 } from './HandDeliveryBlue64' export { default as HandDeliveryWhite64 } from './HandDeliveryWhite64' +export { default as PeopleReferralInviteEmptyStateBlue64 } from './PeopleReferralInviteEmptyStateBlue64' +export { default as PeopleReferralInviteEmptyStateWhite64 } from './PeopleReferralInviteEmptyStateWhite64' export { default as ReportBlue64 } from './ReportBlue64' export { default as ReportWhite64 } from './ReportWhite64' +export { default as ScanHeatmapSiteResearchTestBlue64 } from './ScanHeatmapSiteResearchTestBlue64' +export { default as ScanHeatmapSiteResearchTestWhite64 } from './ScanHeatmapSiteResearchTestWhite64' export { default as ShareLinkBlue64 } from './ShareLinkBlue64' export { default as TeamBusinessBlue64 } from './TeamBusinessBlue64' export { default as TeamBusinessWhite64 } from './TeamBusinessWhite64' diff --git a/packages/picasso-pictograms/src/Pictogram/svg/BoxArchiveEmptyStateBacklogBlue64.svg b/packages/picasso-pictograms/src/Pictogram/svg/BoxArchiveEmptyStateBacklogBlue64.svg new file mode 100644 index 0000000000..5ce26fc78e --- /dev/null +++ b/packages/picasso-pictograms/src/Pictogram/svg/BoxArchiveEmptyStateBacklogBlue64.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/picasso-pictograms/src/Pictogram/svg/BoxArchiveEmptyStateBacklogWhite64.svg b/packages/picasso-pictograms/src/Pictogram/svg/BoxArchiveEmptyStateBacklogWhite64.svg new file mode 100644 index 0000000000..0b3e3de249 --- /dev/null +++ b/packages/picasso-pictograms/src/Pictogram/svg/BoxArchiveEmptyStateBacklogWhite64.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/picasso-pictograms/src/Pictogram/svg/PeopleReferralInviteEmptyStateBlue64.svg b/packages/picasso-pictograms/src/Pictogram/svg/PeopleReferralInviteEmptyStateBlue64.svg new file mode 100644 index 0000000000..58f65a5018 --- /dev/null +++ b/packages/picasso-pictograms/src/Pictogram/svg/PeopleReferralInviteEmptyStateBlue64.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/picasso-pictograms/src/Pictogram/svg/PeopleReferralInviteEmptyStateWhite64.svg b/packages/picasso-pictograms/src/Pictogram/svg/PeopleReferralInviteEmptyStateWhite64.svg new file mode 100644 index 0000000000..25a9f7c9a8 --- /dev/null +++ b/packages/picasso-pictograms/src/Pictogram/svg/PeopleReferralInviteEmptyStateWhite64.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/picasso-pictograms/src/Pictogram/svg/ScanHeatmapSiteResearchTestBlue64.svg b/packages/picasso-pictograms/src/Pictogram/svg/ScanHeatmapSiteResearchTestBlue64.svg new file mode 100644 index 0000000000..6a81cc4d65 --- /dev/null +++ b/packages/picasso-pictograms/src/Pictogram/svg/ScanHeatmapSiteResearchTestBlue64.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/picasso-pictograms/src/Pictogram/svg/ScanHeatmapSiteResearchTestWhite64.svg b/packages/picasso-pictograms/src/Pictogram/svg/ScanHeatmapSiteResearchTestWhite64.svg new file mode 100644 index 0000000000..c03ff4cd49 --- /dev/null +++ b/packages/picasso-pictograms/src/Pictogram/svg/ScanHeatmapSiteResearchTestWhite64.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/svgr.config.js b/svgr.config.js index 58b8ccf7eb..4b1de3f905 100644 --- a/svgr.config.js +++ b/svgr.config.js @@ -16,6 +16,9 @@ const ICON_CLEANUP_CONFIG = { }, } +const ATTRIBUTES_TO_REMOVE_IN_ICONS = '(stroke|width|height|xmlns.*)' +const ATTRIBUTES_TO_REMOVE_IN_PICTOGRAMS = '(width|height|xmlns.*)' + const getCleanupConfig = svgPath => { for (const [key, value] of Object.entries(ICON_CLEANUP_CONFIG)) { if (svgPath.indexOf(key) > -1) { @@ -153,8 +156,30 @@ module.exports = { }, { name: 'removeAttrs', - params: { - attrs: '(stroke|width|height|xmlns.*)', + fn: (node, _, info) => { + const isPictogram = info.path.indexOf('picasso-pictograms') > -1 + + const attrsToRemove = isPictogram + ? ATTRIBUTES_TO_REMOVE_IN_PICTOGRAMS + : ATTRIBUTES_TO_REMOVE_IN_ICONS + + const traverse = (node) => { + if (node.attributes) { + Object.keys(node.attributes).forEach((attr) => { + if (new RegExp(attrsToRemove).test(attr)) { + delete node.attributes[attr] + } + }) + } + + if (node.children) { + node.children.forEach(traverse) + } + } + + traverse(node) + + return node }, }, {