From bf83485b0867df3ee169e6b5e3ddf682f20245c0 Mon Sep 17 00:00:00 2001 From: Gaby Zifferman Date: Mon, 5 Aug 2024 22:07:23 +0200 Subject: [PATCH] feat: icons-variant cleanup code --- src/components/general/Icon/Icon.tsx | 10 +-- src/constants/Icons.ts | 130 ++++++++++++++------------- 2 files changed, 71 insertions(+), 69 deletions(-) diff --git a/src/components/general/Icon/Icon.tsx b/src/components/general/Icon/Icon.tsx index d166c94db..a3e5b67c9 100644 --- a/src/components/general/Icon/Icon.tsx +++ b/src/components/general/Icon/Icon.tsx @@ -1,6 +1,6 @@ import React from 'react' import { Icons } from 'src/constants/Icons' -import { IconOptions, IconVariant, IconNames } from 'src/types/iconTypes' +import type { IconOptions, IconVariant, IconNames } from 'src/types/icons' import './icon.css' type IconSize = 'xxxxl' | 'xxxl' | 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs' @@ -25,14 +25,14 @@ export interface IIconProps { } export const Icon: React.FC = ({ name, color = 'default', size = 'lg', variant }) => { - const iconVariants = Icons[name] as IconOptions + const iconVariants: IconOptions = Icons[name] if (iconVariants?.deprecated) { - console.warn(`Icon with name "${name}" is deprecated. Please use "predictions" instead.`) + console.warn(`Icon with name "${name}" is deprecated. Please use ${iconVariants?.deprecated} instead.`) } - const iconVariant = variant || iconVariants.default - const IconComponent = iconVariants[iconVariant] || iconVariants[iconVariants.default] + const iconVariant = variant ?? iconVariants.default + const IconComponent = iconVariants[iconVariant] ?? iconVariants[iconVariants.default] if (!IconComponent) { console.error(`Icon with name "${name}" and variant "${iconVariant}" not found.`) diff --git a/src/constants/Icons.ts b/src/constants/Icons.ts index c82bb8833..14f16ac5a 100644 --- a/src/constants/Icons.ts +++ b/src/constants/Icons.ts @@ -1,67 +1,69 @@ -import { type IconOptions, type IconNames } from 'src/types/iconTypes' +import { type IconOptions, type IconNames } from 'src/types/icons' -import AddIcon from 'src/assets/svg/add.svg?react' -import AlicornIcon from 'src/assets/svg/alicorn.svg?react' -import AnalyticsIconDt from 'src/assets/svg/mp_pm_dt_analytics.svg?react' -import C360IconDt from 'src/assets/svg/mp_pm_dt_c360.svg?react' -import CatalogIcon from 'src/assets/svg/mp_pm_lt_catalog.svg?react' -import ChartColumnIcon from 'src/assets/svg/chart-column.svg?react' -import ChartLineIcon from 'src/assets/svg/chart-line.svg?react' -import CheckIcon from 'src/assets/svg/check.svg?react' -import CircleNodesIcon from 'src/assets/svg/circle-nodes.svg?react' -import CloudIcon from 'src/assets/svg/cloud.svg?react' -import ConnectionsIcon from 'src/assets/svg/connections.svg?react' -import DataPlatformIconDt from 'src/assets/svg/mp_pm_dt_data-platform.svg?react' -import DatabaseIcon from 'src/assets/svg/database.svg?react' -import DsrIcon from 'src/assets/svg/mp_pm_lt_dsr.svg?react' -import EmptyIcon from 'src/assets/svg/empty.svg?react' -import EnrichmentIcon from 'src/assets/svg/mp_pm_lt_enrichment.svg?react' -import EventAttributeIcon from 'src/assets/svg/event-attribute.svg?react' -import EventIcon from 'src/assets/svg/event.svg?react' -import FitToScreen from 'src/assets/svg/mp_act_lt_fit-to-screen.svg?react' -import FolderClosedIcon from 'src/assets/svg/folder-closed.svg?react' -import ForwardingIcon from 'src/assets/svg/mp_pm_lt_forwarding.svg?react' -import GearIcon from 'src/assets/svg/gear.svg?react' -import GridIcon from 'src/assets/svg/grid.svg?react' -import HeartIcon from 'src/assets/svg/heart.svg?react' -import HelpIcon from 'src/assets/svg/help.svg?react' -import IdentityIcon from 'src/assets/svg/mp_pm_lt_identity.svg?react' -import JumpToIcon from 'src/assets/svg/mp_act_lt_jump-to.svg?react' -import LightBulbIcon from 'src/assets/svg/lightbulb.svg?react' -import LiveStreamIcon from 'src/assets/svg/mp_pm_lt_live-stream.svg?react' -import PaywallIcon from 'src/assets/svg/paywall.svg?react' -import MessageQuestionIcon from 'src/assets/svg/message-question.svg?react' -import MpLogoIcon from 'src/assets/svg/mpLogo.svg?react' -import ObservabilityIcon from 'src/assets/svg/mp_pm_lt_observability.svg?react' -import OversightIconDt from 'src/assets/svg/mp_pm_dt_oversight.svg?react' -import PredictionsIcon from 'src/assets/svg/mp_pm_lt_predictions.svg?react' -import PredictionsIconDt from 'src/assets/svg/mp_pm_dt_predictions.svg?react' -import RemoveIcon from 'src/assets/svg/remove.svg?react' -import SearchIcon from 'src/assets/svg/search.svg?react' -import SegmentationIconDt from 'src/assets/svg/mp_pm_dt_segmentation.svg?react' -import ShieldKeyholeIcon from 'src/assets/svg/shield-keyhole.svg?react' -import SignoutIcon from 'src/assets/svg/signout.svg?react' -import SplitIcon from 'src/assets/svg/split.svg?react' -import SystemAlertsIcon from 'src/assets/svg/mp_pm_lt_system-alerts.svg?react' -import TransformationsIcon from 'src/assets/svg/mp_pm_lt_transformations.svg?react' -import UploadIcon from 'src/assets/svg/mp_act_it_upload.svg?react' -import UserAttributeIcon from 'src/assets/svg/user-attribute.svg?react' -import UserProfilesIcon from 'src/assets/svg/mp_pm_lt_userprofiles.svg?react' -import UsersIcon from 'src/assets/svg/mp_info_lt_users.svg?react' -import WrenchIcon from 'src/assets/svg/wrench.svg?react' -import ZoomIn from 'src/assets/svg/mp_act_lt_zoom-in.svg?react' -import ZoomOut from 'src/assets/svg/mp_act_lt_zoom-out.svg?react' -import PremiumIcon from 'src/assets/svg/mp_info_lt_premium.svg?react' -import ConversionIcon from 'src/assets/svg/mp_info_lt_conversion.svg?react' -import HelpVideoIcon from 'src/assets/svg/mp_info_lt_help-video.svg?react' -import NextIcon from 'src/assets/svg/mp_act_lt_next.svg?react' -import OpenTabIcon from 'src/assets/svg/mp_act_lt_open-tab.svg?react' -import PreviousIcon from 'src/assets/svg/mp_act_lt_previous.svg?react' -import DirectoryIcon from 'src/assets/svg/mp_pm_lt_directory.svg?react' -import LockIcon from 'src/assets/svg/mp_act_lt_lock.svg?react' -import UnlockIcon from 'src/assets/svg/mp_act_lt_unlock.svg?react' -import NotificationIcon from 'src/assets/svg/mp_pm_lt_notification.svg?react' -import PremiumIconDt from 'src/assets/svg/mp_info_dt_premium.svg?react' +import { + AddIcon, + AlicornIcon, + AnalyticsIconDt, + C360IconDt, + CatalogIcon, + ChartColumnIcon, + ChartLineIcon, + CheckIcon, + CircleNodesIcon, + CloudIcon, + ConnectionsIcon, + DataPlatformIconDt, + DatabaseIcon, + DsrIcon, + EmptyIcon, + EnrichmentIcon, + EventAttributeIcon, + EventIcon, + FitToScreen, + FolderClosedIcon, + ForwardingIcon, + GearIcon, + GridIcon, + HeartIcon, + HelpIcon, + HelpVideoIcon, + IdentityIcon, + JumpToIcon, + LightBulbIcon, + LiveStreamIcon, + PaywallIcon, + MessageQuestionIcon, + MpLogoIcon, + ObservabilityIcon, + OversightIconDt, + PredictionsIconDt, + PredictionsIcon, + RemoveIcon, + SearchIcon, + SegmentationIconDt, + ShieldKeyholeIcon, + SignoutIcon, + SplitIcon, + SystemAlertsIcon, + TransformationsIcon, + UploadIcon, + UserAttributeIcon, + UserProfilesIcon, + UsersIcon, + WrenchIcon, + ZoomIn, + ZoomOut, + OpenTabIcon, + ConversionIcon, + PremiumIcon, + NextIcon, + PreviousIcon, + DirectoryIcon, + LockIcon, + UnlockIcon, + NotificationIcon, + PremiumIconDt, +} from 'src/components/icons' export const Icons: Record = { add: { @@ -229,7 +231,7 @@ export const Icons: Record = { light: PredictionsIcon, 'duo-tone': PredictionsIconDt, default: 'light', - deprecated: true, + deprecated: 'predictions', }, predictions: { light: PredictionsIcon,