From 00e3b86136ce571c88c21c996d3782931363e6df Mon Sep 17 00:00:00 2001 From: Gaby Zifferman Date: Mon, 20 May 2024 19:02:22 +0200 Subject: [PATCH 01/26] add suites icons and order them alphabetically --- src/assets/svg/mp_act_lt_jump-to.svg | 3 + src/assets/svg/mp_pm_lt_audiences.svg | 3 + src/assets/svg/mp_pm_lt_catalog.svg | 3 + src/assets/svg/mp_pm_lt_dsr.svg | 3 + src/assets/svg/mp_pm_lt_enrichment.svg | 3 + src/assets/svg/mp_pm_lt_forwarding.svg | 3 + src/assets/svg/mp_pm_lt_identity.svg | 3 + src/assets/svg/mp_pm_lt_journeys.svg | 3 + src/assets/svg/mp_pm_lt_live-stream.svg | 3 + src/assets/svg/mp_pm_lt_observability.svg | 3 + src/assets/svg/mp_pm_lt_privacy.svg | 3 + src/assets/svg/mp_pm_lt_setup.svg | 3 + src/assets/svg/mp_pm_lt_system-alerts.svg | 3 + src/assets/svg/mp_pm_lt_transformations.svg | 3 + src/assets/svg/mp_pm_lt_trends.svg | 3 + src/assets/svg/mp_pm_lt_user.svg | 5 + src/components/icons/index.ts | 108 ++++++++++----- src/constants/Icons.ts | 144 ++++++++++++-------- 18 files changed, 212 insertions(+), 90 deletions(-) create mode 100644 src/assets/svg/mp_act_lt_jump-to.svg create mode 100644 src/assets/svg/mp_pm_lt_audiences.svg create mode 100644 src/assets/svg/mp_pm_lt_catalog.svg create mode 100644 src/assets/svg/mp_pm_lt_dsr.svg create mode 100644 src/assets/svg/mp_pm_lt_enrichment.svg create mode 100644 src/assets/svg/mp_pm_lt_forwarding.svg create mode 100644 src/assets/svg/mp_pm_lt_identity.svg create mode 100644 src/assets/svg/mp_pm_lt_journeys.svg create mode 100644 src/assets/svg/mp_pm_lt_live-stream.svg create mode 100644 src/assets/svg/mp_pm_lt_observability.svg create mode 100644 src/assets/svg/mp_pm_lt_privacy.svg create mode 100644 src/assets/svg/mp_pm_lt_setup.svg create mode 100644 src/assets/svg/mp_pm_lt_system-alerts.svg create mode 100644 src/assets/svg/mp_pm_lt_transformations.svg create mode 100644 src/assets/svg/mp_pm_lt_trends.svg create mode 100644 src/assets/svg/mp_pm_lt_user.svg diff --git a/src/assets/svg/mp_act_lt_jump-to.svg b/src/assets/svg/mp_act_lt_jump-to.svg new file mode 100644 index 000000000..0a9f6f756 --- /dev/null +++ b/src/assets/svg/mp_act_lt_jump-to.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/svg/mp_pm_lt_audiences.svg b/src/assets/svg/mp_pm_lt_audiences.svg new file mode 100644 index 000000000..7c9628e00 --- /dev/null +++ b/src/assets/svg/mp_pm_lt_audiences.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/svg/mp_pm_lt_catalog.svg b/src/assets/svg/mp_pm_lt_catalog.svg new file mode 100644 index 000000000..3790eb89f --- /dev/null +++ b/src/assets/svg/mp_pm_lt_catalog.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/svg/mp_pm_lt_dsr.svg b/src/assets/svg/mp_pm_lt_dsr.svg new file mode 100644 index 000000000..2b160547a --- /dev/null +++ b/src/assets/svg/mp_pm_lt_dsr.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/svg/mp_pm_lt_enrichment.svg b/src/assets/svg/mp_pm_lt_enrichment.svg new file mode 100644 index 000000000..d42de9f95 --- /dev/null +++ b/src/assets/svg/mp_pm_lt_enrichment.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/svg/mp_pm_lt_forwarding.svg b/src/assets/svg/mp_pm_lt_forwarding.svg new file mode 100644 index 000000000..7d18b9d37 --- /dev/null +++ b/src/assets/svg/mp_pm_lt_forwarding.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/svg/mp_pm_lt_identity.svg b/src/assets/svg/mp_pm_lt_identity.svg new file mode 100644 index 000000000..29e279009 --- /dev/null +++ b/src/assets/svg/mp_pm_lt_identity.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/svg/mp_pm_lt_journeys.svg b/src/assets/svg/mp_pm_lt_journeys.svg new file mode 100644 index 000000000..3722e429f --- /dev/null +++ b/src/assets/svg/mp_pm_lt_journeys.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/svg/mp_pm_lt_live-stream.svg b/src/assets/svg/mp_pm_lt_live-stream.svg new file mode 100644 index 000000000..78b07d3f8 --- /dev/null +++ b/src/assets/svg/mp_pm_lt_live-stream.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/svg/mp_pm_lt_observability.svg b/src/assets/svg/mp_pm_lt_observability.svg new file mode 100644 index 000000000..362dd87e5 --- /dev/null +++ b/src/assets/svg/mp_pm_lt_observability.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/svg/mp_pm_lt_privacy.svg b/src/assets/svg/mp_pm_lt_privacy.svg new file mode 100644 index 000000000..eb5929ce5 --- /dev/null +++ b/src/assets/svg/mp_pm_lt_privacy.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/svg/mp_pm_lt_setup.svg b/src/assets/svg/mp_pm_lt_setup.svg new file mode 100644 index 000000000..f22bd6d88 --- /dev/null +++ b/src/assets/svg/mp_pm_lt_setup.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/svg/mp_pm_lt_system-alerts.svg b/src/assets/svg/mp_pm_lt_system-alerts.svg new file mode 100644 index 000000000..69e9955d8 --- /dev/null +++ b/src/assets/svg/mp_pm_lt_system-alerts.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/svg/mp_pm_lt_transformations.svg b/src/assets/svg/mp_pm_lt_transformations.svg new file mode 100644 index 000000000..9f12cc7bb --- /dev/null +++ b/src/assets/svg/mp_pm_lt_transformations.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/svg/mp_pm_lt_trends.svg b/src/assets/svg/mp_pm_lt_trends.svg new file mode 100644 index 000000000..d29e22774 --- /dev/null +++ b/src/assets/svg/mp_pm_lt_trends.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/svg/mp_pm_lt_user.svg b/src/assets/svg/mp_pm_lt_user.svg new file mode 100644 index 000000000..6da5ce868 --- /dev/null +++ b/src/assets/svg/mp_pm_lt_user.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts index cfa1ac327..acf640fa8 100644 --- a/src/components/icons/index.ts +++ b/src/components/icons/index.ts @@ -4,58 +4,96 @@ import DatabaseIcon from 'src/assets/svg/database.svg?react' import GridIcon from 'src/assets/svg/grid.svg?react' import CheckIcon from 'src/assets/svg/check.svg?react' import ShieldKeyholeIcon from 'src/assets/svg/shield-keyhole.svg?react' -import UsersIcon from 'src/assets/svg/users.svg?react' -import WrenchIcon from 'src/assets/svg/wrench.svg?react' +import AddIcon from 'src/assets/svg/add.svg?react' import AlicornIcon from 'src/assets/svg/alicorn.svg?react' -import MessageQuestionIcon from 'src/assets/svg/message-question.svg?react' -import GearIcon from 'src/assets/svg/gear.svg?react' -import SparklesIcon from 'src/assets/svg/sparkles.svg?react' -import SiteMapIcon from 'src/assets/svg/sitemap.svg?react' +import AnalyticsIcon from 'src/assets/svg/analytics.svg?react' +import AudiencesIcon from 'src/assets/svg/mp_pm_lt_audiences.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 HeartIcon from 'src/assets/svg/heart.svg?react' -import LightBulbIcon from 'src/assets/svg/lightbulb.svg?react' -import SplitIcon from 'src/assets/svg/split.svg?react' import CircleNodesIcon from 'src/assets/svg/circle-nodes.svg?react' import CloudIcon from 'src/assets/svg/cloud.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 FolderClosedIcon from 'src/assets/svg/folder-closed.svg?react' -import AddIcon from 'src/assets/svg/add.svg?react' -import MpLogoIcon from 'src/assets/svg/mpLogo.svg?react' +import ForwardingIcon from 'src/assets/svg/mp_pm_lt_forwarding.svg?react' +import GearIcon from 'src/assets/svg/gear.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 JourneysIcon from 'src/assets/svg/mp_pm_lt_journeys.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 LockIcon from 'src/assets/svg/lock.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 PrivacyIcon from 'src/assets/svg/mp_pm_lt_privacy.svg?react' +import RemoveIcon from 'src/assets/svg/remove.svg?react' import SearchIcon from 'src/assets/svg/search.svg?react' -import AnalyticsIcon from 'src/assets/svg/analytics.svg?react' -import EmptyIcon from 'src/assets/svg/empty.svg?react' -import EventAttributeIcon from 'src/assets/svg/event-attribute.svg?react' +import SetupIcon from 'src/assets/svg/mp_pm_lt_setup.svg?react' +import SignoutIcon from 'src/assets/svg/signout.svg?react' +import SiteMapIcon from 'src/assets/svg/sitemap.svg?react' +import SparklesIcon from 'src/assets/svg/sparkles.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 TrendsIcon from 'src/assets/svg/mp_pm_lt_trends.svg?react' import UserAttributeIcon from 'src/assets/svg/user-attribute.svg?react' -import EventIcon from 'src/assets/svg/event.svg?react' +import UsersIcon from 'src/assets/svg/users.svg?react' +import UserProfileIcon from 'src/assets/svg/mp_pm_lt_user.svg?react' +import WrenchIcon from 'src/assets/svg/wrench.svg?react' export { AddIcon, - LockIcon, - MpLogoIcon, - SearchIcon, - CheckIcon, + AlicornIcon, + AnalyticsIcon, + AudiencesIcon, + CatalogIcon, + ChartColumnIcon, ChartLineIcon, + CheckIcon, + CircleNodesIcon, + CloudIcon, ConnectionsIcon, DatabaseIcon, - GridIcon, - ShieldKeyholeIcon, - UsersIcon, - WrenchIcon, - AlicornIcon, - MessageQuestionIcon, + DsrIcon, + EmptyIcon, + EnrichmentIcon, + EventAttributeIcon, + EventIcon, + FolderClosedIcon, + ForwardingIcon, GearIcon, - SparklesIcon, - SiteMapIcon, - ChartColumnIcon, + GridIcon, HeartIcon, + HelpIcon, + IdentityIcon, + JourneysIcon, + JumpToIcon, LightBulbIcon, + LiveStreamIcon, + LockIcon, + MessageQuestionIcon, + MpLogoIcon, + ObservabilityIcon, + PrivacyIcon, + RemoveIcon, + SearchIcon, + SetupIcon, + ShieldKeyholeIcon, + SignoutIcon, + SiteMapIcon, + SparklesIcon, SplitIcon, - CircleNodesIcon, - CloudIcon, - FolderClosedIcon, - AnalyticsIcon, - EmptyIcon, - EventAttributeIcon, + SystemAlertsIcon, + TransformationsIcon, + TrendsIcon, UserAttributeIcon, - EventIcon, + UsersIcon, + UserProfileIcon, + WrenchIcon, } diff --git a/src/constants/Icons.ts b/src/constants/Icons.ts index 09e1b44f5..3d6c689d6 100644 --- a/src/constants/Icons.ts +++ b/src/constants/Icons.ts @@ -1,67 +1,101 @@ -import ChartLineIcon from 'src/assets/svg/chart-line.svg?react' -import ConnectionsIcon from 'src/assets/svg/connections.svg?react' -import DatabaseIcon from 'src/assets/svg/database.svg?react' -import GridIcon from 'src/assets/svg/grid.svg?react' -import CheckIcon from 'src/assets/svg/check.svg?react' -import ShieldKeyholeIcon from 'src/assets/svg/shield-keyhole.svg?react' -import UsersIcon from 'src/assets/svg/users.svg?react' -import WrenchIcon from 'src/assets/svg/wrench.svg?react' -import AlicornIcon from 'src/assets/svg/alicorn.svg?react' -import MessageQuestionIcon from 'src/assets/svg/message-question.svg?react' -import GearIcon from 'src/assets/svg/gear.svg?react' -import SparklesIcon from 'src/assets/svg/sparkles.svg?react' -import SiteMapIcon from 'src/assets/svg/sitemap.svg?react' -import ChartColumnIcon from 'src/assets/svg/chart-column.svg?react' -import HeartIcon from 'src/assets/svg/heart.svg?react' -import LightBulbIcon from 'src/assets/svg/lightbulb.svg?react' -import SplitIcon from 'src/assets/svg/split.svg?react' -import CircleNodesIcon from 'src/assets/svg/circle-nodes.svg?react' -import CloudIcon from 'src/assets/svg/cloud.svg?react' -import FolderClosedIcon from 'src/assets/svg/folder-closed.svg?react' -import AddIcon from 'src/assets/svg/add.svg?react' -import MpLogoIcon from 'src/assets/svg/mpLogo.svg?react' -import SignoutIcon from 'src/assets/svg/signout.svg?react' -import LockIcon from 'src/assets/svg/lock.svg?react' -import SearchIcon from 'src/assets/svg/search.svg?react' -import AnalyticsIcon from 'src/assets/svg/analytics.svg?react' -import EventIcon from 'src/assets/svg/event.svg?react' -import EventAttributeIcon from 'src/assets/svg/event-attribute.svg?react' -import UserAttributeIcon from 'src/assets/svg/user-attribute.svg?react' -import EmptyIcon from 'src/assets/svg/empty.svg?react' -import RemoveIcon from 'src/assets/svg/remove.svg?react' -import HelpIcon from 'src/assets/svg/help.svg?react' +import { + AddIcon, + AlicornIcon, + AnalyticsIcon, + AudiencesIcon, + CatalogIcon, + ChartColumnIcon, + ChartLineIcon, + CheckIcon, + CircleNodesIcon, + CloudIcon, + ConnectionsIcon, + DatabaseIcon, + DsrIcon, + EmptyIcon, + EnrichmentIcon, + EventAttributeIcon, + EventIcon, + FolderClosedIcon, + ForwardingIcon, + GearIcon, + GridIcon, + HeartIcon, + HelpIcon, + IdentityIcon, + JourneysIcon, + JumpToIcon, + LightBulbIcon, + LiveStreamIcon, + LockIcon, + MessageQuestionIcon, + MpLogoIcon, + ObservabilityIcon, + PrivacyIcon, + RemoveIcon, + SearchIcon, + SetupIcon, + ShieldKeyholeIcon, + SignoutIcon, + SiteMapIcon, + SparklesIcon, + SplitIcon, + SystemAlertsIcon, + TransformationsIcon, + TrendsIcon, + UserAttributeIcon, + UserProfileIcon, + UsersIcon, + WrenchIcon, +} from 'src/components/icons' export const Icons = { - alicorn: AlicornIcon, add: AddIcon, - lock: LockIcon, - mpLogo: MpLogoIcon, - search: SearchIcon, - check: CheckIcon, + alicorn: AlicornIcon, + analytics: AnalyticsIcon, + audiences: AudiencesIcon, + catalog: CatalogIcon, + chartColumn: ChartColumnIcon, chartLine: ChartLineIcon, + check: CheckIcon, + circleNodes: CircleNodesIcon, + cloud: CloudIcon, connections: ConnectionsIcon, database: DatabaseIcon, - grid: GridIcon, - shieldKeyhole: ShieldKeyholeIcon, - users: UsersIcon, - wrench: WrenchIcon, - messageQuestion: MessageQuestionIcon, + dsr: DsrIcon, + empty: EmptyIcon, + enrichment: EnrichmentIcon, + event: EventIcon, + eventAttribute: EventAttributeIcon, + folderClosed: FolderClosedIcon, + forwarding: ForwardingIcon, gear: GearIcon, - sparkles: SparklesIcon, - siteMap: SiteMapIcon, - chartColumn: ChartColumnIcon, + grid: GridIcon, heart: HeartIcon, + help: HelpIcon, + identity: IdentityIcon, + journeys: JourneysIcon, + jumpTo: JumpToIcon, lightBulb: LightBulbIcon, - split: SplitIcon, + liveStream: LiveStreamIcon, + lock: LockIcon, + messageQuestion: MessageQuestionIcon, + mpLogo: MpLogoIcon, + observability: ObservabilityIcon, + privacy: PrivacyIcon, + remove: RemoveIcon, + search: SearchIcon, + setUp: SetupIcon, + shieldKeyhole: ShieldKeyholeIcon, signout: SignoutIcon, - circleNodes: CircleNodesIcon, - cloud: CloudIcon, - folderClosed: FolderClosedIcon, - analytics: AnalyticsIcon, - empty: EmptyIcon, - eventAttribute: EventAttributeIcon, - event: EventIcon, + siteMap: SiteMapIcon, + sparkles: SparklesIcon, + split: SplitIcon, + systemAlerts: SystemAlertsIcon, + transformation: TransformationsIcon, + trends: TrendsIcon, userAttribute: UserAttributeIcon, - remove: RemoveIcon, - help: HelpIcon, + userProfile: UserProfileIcon, + users: UsersIcon, + wrench: WrenchIcon, } as const From 57b432fae8fc6480a76c40010c38aa7c1741b3cc Mon Sep 17 00:00:00 2001 From: Gaby Zifferman Date: Mon, 20 May 2024 19:29:30 +0200 Subject: [PATCH 02/26] Delete src/assets/svg/mp_pm_lt_audiences.svg --- src/assets/svg/mp_pm_lt_audiences.svg | 3 --- 1 file changed, 3 deletions(-) delete mode 100644 src/assets/svg/mp_pm_lt_audiences.svg diff --git a/src/assets/svg/mp_pm_lt_audiences.svg b/src/assets/svg/mp_pm_lt_audiences.svg deleted file mode 100644 index 7c9628e00..000000000 --- a/src/assets/svg/mp_pm_lt_audiences.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file From 098f8c09908875f8edbd4bd50ae3a43f079a85ab Mon Sep 17 00:00:00 2001 From: Gaby Zifferman Date: Mon, 20 May 2024 19:30:13 +0200 Subject: [PATCH 03/26] Delete src/assets/svg/mp_pm_lt_journeys.svg --- src/assets/svg/mp_pm_lt_journeys.svg | 3 --- 1 file changed, 3 deletions(-) delete mode 100644 src/assets/svg/mp_pm_lt_journeys.svg diff --git a/src/assets/svg/mp_pm_lt_journeys.svg b/src/assets/svg/mp_pm_lt_journeys.svg deleted file mode 100644 index 3722e429f..000000000 --- a/src/assets/svg/mp_pm_lt_journeys.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file From 374aae8e4d3db1389db59c193a92ae4750aeae63 Mon Sep 17 00:00:00 2001 From: Gaby Zifferman Date: Mon, 20 May 2024 19:30:50 +0200 Subject: [PATCH 04/26] Delete src/assets/svg/mp_pm_lt_privacy.svg --- src/assets/svg/mp_pm_lt_privacy.svg | 3 --- 1 file changed, 3 deletions(-) delete mode 100644 src/assets/svg/mp_pm_lt_privacy.svg diff --git a/src/assets/svg/mp_pm_lt_privacy.svg b/src/assets/svg/mp_pm_lt_privacy.svg deleted file mode 100644 index eb5929ce5..000000000 --- a/src/assets/svg/mp_pm_lt_privacy.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file From a53d90581ddfe962522db030ceaff3512628515e Mon Sep 17 00:00:00 2001 From: Gaby Zifferman Date: Mon, 20 May 2024 19:31:05 +0200 Subject: [PATCH 05/26] Delete src/assets/svg/mp_pm_lt_setup.svg --- src/assets/svg/mp_pm_lt_setup.svg | 3 --- 1 file changed, 3 deletions(-) delete mode 100644 src/assets/svg/mp_pm_lt_setup.svg diff --git a/src/assets/svg/mp_pm_lt_setup.svg b/src/assets/svg/mp_pm_lt_setup.svg deleted file mode 100644 index f22bd6d88..000000000 --- a/src/assets/svg/mp_pm_lt_setup.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file From 1c40250bfdb32332b9a5b2d2e3c131061f72b0c1 Mon Sep 17 00:00:00 2001 From: Gaby Zifferman Date: Mon, 20 May 2024 19:31:22 +0200 Subject: [PATCH 06/26] Delete src/assets/svg/mp_pm_lt_trends.svg --- src/assets/svg/mp_pm_lt_trends.svg | 3 --- 1 file changed, 3 deletions(-) delete mode 100644 src/assets/svg/mp_pm_lt_trends.svg diff --git a/src/assets/svg/mp_pm_lt_trends.svg b/src/assets/svg/mp_pm_lt_trends.svg deleted file mode 100644 index d29e22774..000000000 --- a/src/assets/svg/mp_pm_lt_trends.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file From df63364d70d5e87a1749acd72ba6bc4c2e5bf5f0 Mon Sep 17 00:00:00 2001 From: Gaby Zifferman Date: Mon, 20 May 2024 19:35:04 +0200 Subject: [PATCH 07/26] remove duplicated icons --- src/components/icons/index.ts | 10 ---------- src/constants/Icons.ts | 10 ---------- 2 files changed, 20 deletions(-) diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts index acf640fa8..a8bdbba22 100644 --- a/src/components/icons/index.ts +++ b/src/components/icons/index.ts @@ -7,7 +7,6 @@ import ShieldKeyholeIcon from 'src/assets/svg/shield-keyhole.svg?react' import AddIcon from 'src/assets/svg/add.svg?react' import AlicornIcon from 'src/assets/svg/alicorn.svg?react' import AnalyticsIcon from 'src/assets/svg/analytics.svg?react' -import AudiencesIcon from 'src/assets/svg/mp_pm_lt_audiences.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 CircleNodesIcon from 'src/assets/svg/circle-nodes.svg?react' @@ -23,7 +22,6 @@ import GearIcon from 'src/assets/svg/gear.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 JourneysIcon from 'src/assets/svg/mp_pm_lt_journeys.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' @@ -31,9 +29,7 @@ import LockIcon from 'src/assets/svg/lock.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 PrivacyIcon from 'src/assets/svg/mp_pm_lt_privacy.svg?react' import RemoveIcon from 'src/assets/svg/remove.svg?react' -import SearchIcon from 'src/assets/svg/search.svg?react' import SetupIcon from 'src/assets/svg/mp_pm_lt_setup.svg?react' import SignoutIcon from 'src/assets/svg/signout.svg?react' import SiteMapIcon from 'src/assets/svg/sitemap.svg?react' @@ -41,7 +37,6 @@ import SparklesIcon from 'src/assets/svg/sparkles.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 TrendsIcon from 'src/assets/svg/mp_pm_lt_trends.svg?react' import UserAttributeIcon from 'src/assets/svg/user-attribute.svg?react' import UsersIcon from 'src/assets/svg/users.svg?react' import UserProfileIcon from 'src/assets/svg/mp_pm_lt_user.svg?react' @@ -51,7 +46,6 @@ export { AddIcon, AlicornIcon, AnalyticsIcon, - AudiencesIcon, CatalogIcon, ChartColumnIcon, ChartLineIcon, @@ -72,7 +66,6 @@ export { HeartIcon, HelpIcon, IdentityIcon, - JourneysIcon, JumpToIcon, LightBulbIcon, LiveStreamIcon, @@ -80,9 +73,7 @@ export { MessageQuestionIcon, MpLogoIcon, ObservabilityIcon, - PrivacyIcon, RemoveIcon, - SearchIcon, SetupIcon, ShieldKeyholeIcon, SignoutIcon, @@ -91,7 +82,6 @@ export { SplitIcon, SystemAlertsIcon, TransformationsIcon, - TrendsIcon, UserAttributeIcon, UsersIcon, UserProfileIcon, diff --git a/src/constants/Icons.ts b/src/constants/Icons.ts index 3d6c689d6..b2544e71f 100644 --- a/src/constants/Icons.ts +++ b/src/constants/Icons.ts @@ -2,7 +2,6 @@ import { AddIcon, AlicornIcon, AnalyticsIcon, - AudiencesIcon, CatalogIcon, ChartColumnIcon, ChartLineIcon, @@ -23,7 +22,6 @@ import { HeartIcon, HelpIcon, IdentityIcon, - JourneysIcon, JumpToIcon, LightBulbIcon, LiveStreamIcon, @@ -31,9 +29,7 @@ import { MessageQuestionIcon, MpLogoIcon, ObservabilityIcon, - PrivacyIcon, RemoveIcon, - SearchIcon, SetupIcon, ShieldKeyholeIcon, SignoutIcon, @@ -42,7 +38,6 @@ import { SplitIcon, SystemAlertsIcon, TransformationsIcon, - TrendsIcon, UserAttributeIcon, UserProfileIcon, UsersIcon, @@ -53,7 +48,6 @@ export const Icons = { add: AddIcon, alicorn: AlicornIcon, analytics: AnalyticsIcon, - audiences: AudiencesIcon, catalog: CatalogIcon, chartColumn: ChartColumnIcon, chartLine: ChartLineIcon, @@ -74,7 +68,6 @@ export const Icons = { heart: HeartIcon, help: HelpIcon, identity: IdentityIcon, - journeys: JourneysIcon, jumpTo: JumpToIcon, lightBulb: LightBulbIcon, liveStream: LiveStreamIcon, @@ -82,9 +75,7 @@ export const Icons = { messageQuestion: MessageQuestionIcon, mpLogo: MpLogoIcon, observability: ObservabilityIcon, - privacy: PrivacyIcon, remove: RemoveIcon, - search: SearchIcon, setUp: SetupIcon, shieldKeyhole: ShieldKeyholeIcon, signout: SignoutIcon, @@ -93,7 +84,6 @@ export const Icons = { split: SplitIcon, systemAlerts: SystemAlertsIcon, transformation: TransformationsIcon, - trends: TrendsIcon, userAttribute: UserAttributeIcon, userProfile: UserProfileIcon, users: UsersIcon, From f5b9d0ee2695da8e0b2991f9e496af943b97f352 Mon Sep 17 00:00:00 2001 From: Gaby Zifferman Date: Mon, 20 May 2024 19:44:12 +0200 Subject: [PATCH 08/26] remove extra icons --- src/components/icons/index.ts | 2 -- src/constants/Icons.ts | 2 -- 2 files changed, 4 deletions(-) diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts index a8bdbba22..02b6640ef 100644 --- a/src/components/icons/index.ts +++ b/src/components/icons/index.ts @@ -30,7 +30,6 @@ 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 RemoveIcon from 'src/assets/svg/remove.svg?react' -import SetupIcon from 'src/assets/svg/mp_pm_lt_setup.svg?react' import SignoutIcon from 'src/assets/svg/signout.svg?react' import SiteMapIcon from 'src/assets/svg/sitemap.svg?react' import SparklesIcon from 'src/assets/svg/sparkles.svg?react' @@ -74,7 +73,6 @@ export { MpLogoIcon, ObservabilityIcon, RemoveIcon, - SetupIcon, ShieldKeyholeIcon, SignoutIcon, SiteMapIcon, diff --git a/src/constants/Icons.ts b/src/constants/Icons.ts index b2544e71f..20b85107f 100644 --- a/src/constants/Icons.ts +++ b/src/constants/Icons.ts @@ -30,7 +30,6 @@ import { MpLogoIcon, ObservabilityIcon, RemoveIcon, - SetupIcon, ShieldKeyholeIcon, SignoutIcon, SiteMapIcon, @@ -76,7 +75,6 @@ export const Icons = { mpLogo: MpLogoIcon, observability: ObservabilityIcon, remove: RemoveIcon, - setUp: SetupIcon, shieldKeyhole: ShieldKeyholeIcon, signout: SignoutIcon, siteMap: SiteMapIcon, From d40148056972da8de42ef8972677f8c0c87d3d8f Mon Sep 17 00:00:00 2001 From: Gaby Zifferman Date: Mon, 20 May 2024 20:02:09 +0200 Subject: [PATCH 09/26] add search icon back :) --- src/components/icons/index.ts | 2 ++ src/constants/Icons.ts | 2 ++ 2 files changed, 4 insertions(+) diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts index 02b6640ef..bd9c9693e 100644 --- a/src/components/icons/index.ts +++ b/src/components/icons/index.ts @@ -30,6 +30,7 @@ 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 RemoveIcon from 'src/assets/svg/remove.svg?react' +import SearchIcon from 'src/assets/svg/search.svg?react' import SignoutIcon from 'src/assets/svg/signout.svg?react' import SiteMapIcon from 'src/assets/svg/sitemap.svg?react' import SparklesIcon from 'src/assets/svg/sparkles.svg?react' @@ -74,6 +75,7 @@ export { ObservabilityIcon, RemoveIcon, ShieldKeyholeIcon, + SearchIcon, SignoutIcon, SiteMapIcon, SparklesIcon, diff --git a/src/constants/Icons.ts b/src/constants/Icons.ts index 20b85107f..3e0428cba 100644 --- a/src/constants/Icons.ts +++ b/src/constants/Icons.ts @@ -30,6 +30,7 @@ import { MpLogoIcon, ObservabilityIcon, RemoveIcon, + SearchIcon, ShieldKeyholeIcon, SignoutIcon, SiteMapIcon, @@ -76,6 +77,7 @@ export const Icons = { observability: ObservabilityIcon, remove: RemoveIcon, shieldKeyhole: ShieldKeyholeIcon, + search: SearchIcon, signout: SignoutIcon, siteMap: SiteMapIcon, sparkles: SparklesIcon, From 45a722991e5284622bd217dcd7dbee77627b3bc7 Mon Sep 17 00:00:00 2001 From: Gaby Zifferman Date: Mon, 20 May 2024 20:41:01 +0200 Subject: [PATCH 10/26] add current color prop --- src/assets/svg/mp_act_lt_jump-to.svg | 2 +- src/assets/svg/mp_pm_lt_catalog.svg | 2 +- src/assets/svg/mp_pm_lt_dsr.svg | 2 +- src/assets/svg/mp_pm_lt_enrichment.svg | 2 +- src/assets/svg/mp_pm_lt_forwarding.svg | 2 +- src/assets/svg/mp_pm_lt_identity.svg | 2 +- src/assets/svg/mp_pm_lt_live-stream.svg | 2 +- src/assets/svg/mp_pm_lt_observability.svg | 2 +- src/assets/svg/mp_pm_lt_system-alerts.svg | 2 +- src/assets/svg/mp_pm_lt_transformations.svg | 2 +- src/assets/svg/mp_pm_lt_user.svg | 2 +- 11 files changed, 11 insertions(+), 11 deletions(-) diff --git a/src/assets/svg/mp_act_lt_jump-to.svg b/src/assets/svg/mp_act_lt_jump-to.svg index 0a9f6f756..12db8a85d 100644 --- a/src/assets/svg/mp_act_lt_jump-to.svg +++ b/src/assets/svg/mp_act_lt_jump-to.svg @@ -1,3 +1,3 @@ - + \ No newline at end of file diff --git a/src/assets/svg/mp_pm_lt_catalog.svg b/src/assets/svg/mp_pm_lt_catalog.svg index 3790eb89f..4719f00a3 100644 --- a/src/assets/svg/mp_pm_lt_catalog.svg +++ b/src/assets/svg/mp_pm_lt_catalog.svg @@ -1,3 +1,3 @@ - + \ No newline at end of file diff --git a/src/assets/svg/mp_pm_lt_dsr.svg b/src/assets/svg/mp_pm_lt_dsr.svg index 2b160547a..5af509ecb 100644 --- a/src/assets/svg/mp_pm_lt_dsr.svg +++ b/src/assets/svg/mp_pm_lt_dsr.svg @@ -1,3 +1,3 @@ - + \ No newline at end of file diff --git a/src/assets/svg/mp_pm_lt_enrichment.svg b/src/assets/svg/mp_pm_lt_enrichment.svg index d42de9f95..fb71e9e89 100644 --- a/src/assets/svg/mp_pm_lt_enrichment.svg +++ b/src/assets/svg/mp_pm_lt_enrichment.svg @@ -1,3 +1,3 @@ - + \ No newline at end of file diff --git a/src/assets/svg/mp_pm_lt_forwarding.svg b/src/assets/svg/mp_pm_lt_forwarding.svg index 7d18b9d37..8a94559c4 100644 --- a/src/assets/svg/mp_pm_lt_forwarding.svg +++ b/src/assets/svg/mp_pm_lt_forwarding.svg @@ -1,3 +1,3 @@ - + \ No newline at end of file diff --git a/src/assets/svg/mp_pm_lt_identity.svg b/src/assets/svg/mp_pm_lt_identity.svg index 29e279009..750072ba1 100644 --- a/src/assets/svg/mp_pm_lt_identity.svg +++ b/src/assets/svg/mp_pm_lt_identity.svg @@ -1,3 +1,3 @@ - + \ No newline at end of file diff --git a/src/assets/svg/mp_pm_lt_live-stream.svg b/src/assets/svg/mp_pm_lt_live-stream.svg index 78b07d3f8..3e6d19fad 100644 --- a/src/assets/svg/mp_pm_lt_live-stream.svg +++ b/src/assets/svg/mp_pm_lt_live-stream.svg @@ -1,3 +1,3 @@ - + \ No newline at end of file diff --git a/src/assets/svg/mp_pm_lt_observability.svg b/src/assets/svg/mp_pm_lt_observability.svg index 362dd87e5..508ee9e04 100644 --- a/src/assets/svg/mp_pm_lt_observability.svg +++ b/src/assets/svg/mp_pm_lt_observability.svg @@ -1,3 +1,3 @@ - + \ No newline at end of file diff --git a/src/assets/svg/mp_pm_lt_system-alerts.svg b/src/assets/svg/mp_pm_lt_system-alerts.svg index 69e9955d8..99c339c0e 100644 --- a/src/assets/svg/mp_pm_lt_system-alerts.svg +++ b/src/assets/svg/mp_pm_lt_system-alerts.svg @@ -1,3 +1,3 @@ - + \ No newline at end of file diff --git a/src/assets/svg/mp_pm_lt_transformations.svg b/src/assets/svg/mp_pm_lt_transformations.svg index 9f12cc7bb..469e2a790 100644 --- a/src/assets/svg/mp_pm_lt_transformations.svg +++ b/src/assets/svg/mp_pm_lt_transformations.svg @@ -1,3 +1,3 @@ - + \ No newline at end of file diff --git a/src/assets/svg/mp_pm_lt_user.svg b/src/assets/svg/mp_pm_lt_user.svg index 6da5ce868..f66a81238 100644 --- a/src/assets/svg/mp_pm_lt_user.svg +++ b/src/assets/svg/mp_pm_lt_user.svg @@ -1,4 +1,4 @@ - + From e093faa550fc731e1b16c668c702c47c7300be8e Mon Sep 17 00:00:00 2001 From: jared-dickman Date: Mon, 20 May 2024 15:58:06 -0400 Subject: [PATCH 11/26] feat: icon sizes (#238) --- .../data-entry/QueryItem/Action.tsx | 8 +-- .../data-entry/QueryItem/Cascader.tsx | 8 +-- .../feedback/Skeleton/Skeleton.stories.tsx | 4 +- src/components/general/Icon/Icon.stories.tsx | 18 ++++- src/components/general/Icon/Icon.tsx | 17 ++++- src/components/general/Icon/icon.css | 68 +++++++++++-------- .../Breadcrumb/Breadcrumb.stories.tsx | 4 +- .../GlobalNavigation/NavigationCreate.tsx | 2 +- .../WorkspaceSelector/WorkspaceSelector.tsx | 4 +- .../navigation/Steps/Steps.stories.tsx | 4 +- src/styles/_variables.css | 14 +++- src/styles/style.ts | 18 +++-- 12 files changed, 108 insertions(+), 61 deletions(-) diff --git a/src/components/data-entry/QueryItem/Action.tsx b/src/components/data-entry/QueryItem/Action.tsx index 16c2393f2..2c6eae095 100644 --- a/src/components/data-entry/QueryItem/Action.tsx +++ b/src/components/data-entry/QueryItem/Action.tsx @@ -1,4 +1,4 @@ -import { Icon, Button, IButtonProps } from 'src/components' +import { Button, type IButtonProps, Icon } from 'src/components' import './query-item.css' export interface IActionProps { @@ -20,8 +20,8 @@ export const Action = (props: IActionProps) => { } let iconColor: 'primary' | 'default' = 'primary' - if (props.type == 'default') iconColor = 'default' - if (props.type == 'disabled') iconColor = 'default' + if (props.type === 'default') iconColor = 'default' + if (props.type === 'disabled') iconColor = 'default' return ( <> @@ -31,4 +31,4 @@ export const Action = (props: IActionProps) => { ) -} +} \ No newline at end of file diff --git a/src/components/data-entry/QueryItem/Cascader.tsx b/src/components/data-entry/QueryItem/Cascader.tsx index fc600c478..043c6edb2 100644 --- a/src/components/data-entry/QueryItem/Cascader.tsx +++ b/src/components/data-entry/QueryItem/Cascader.tsx @@ -174,10 +174,6 @@ export const Cascader = (props: ICascaderProps) => { } function getIcon() { - return props.icon ? ( - - ) : ( - - ) + return } -} +} \ No newline at end of file diff --git a/src/components/feedback/Skeleton/Skeleton.stories.tsx b/src/components/feedback/Skeleton/Skeleton.stories.tsx index 99996cc85..581c9e422 100644 --- a/src/components/feedback/Skeleton/Skeleton.stories.tsx +++ b/src/components/feedback/Skeleton/Skeleton.stories.tsx @@ -136,7 +136,7 @@ export const ExampleConfigs: Story = { - + @@ -276,4 +276,4 @@ export const ExampleList: Story = { ) }, -} +} \ No newline at end of file diff --git a/src/components/general/Icon/Icon.stories.tsx b/src/components/general/Icon/Icon.stories.tsx index 6395327b1..a22959997 100644 --- a/src/components/general/Icon/Icon.stories.tsx +++ b/src/components/general/Icon/Icon.stories.tsx @@ -27,13 +27,25 @@ const meta: Meta = { argTypes: { size: { control: 'select', - options: ['xxl', 'xl', 'lg', 'md', 'ms', 'sm', 'xs', 'xxs'], + options: ['xxxxl', 'xxxl', 'xxl', 'xl', 'lg', 'md', 'sm', 'xs'], }, color: { control: 'select', - options: ['default', 'primary', 'success', 'warning', 'error', 'info', 'white', 'black', 'text'], + options: [ + 'default', + 'primary', + 'success', + 'warning', + 'error', + 'info', + 'white', + 'black', + 'text', + 'strong', + 'brand', + ], }, }, } -export default meta +export default meta \ No newline at end of file diff --git a/src/components/general/Icon/Icon.tsx b/src/components/general/Icon/Icon.tsx index 174fd731d..01e236974 100644 --- a/src/components/general/Icon/Icon.tsx +++ b/src/components/general/Icon/Icon.tsx @@ -1,8 +1,19 @@ import { Icons } from 'src/constants/Icons' import './icon.css' -type IconColor = 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info' | 'white' | 'black' | 'text' -type IconSize = 'xxl' | 'xl' | 'lg' | 'md' | 'ms' | 'sm' | 'xs' | 'xxs' +type IconSize = 'xxxxl' | 'xxxl' | 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs' +type IconColor = + | 'default' + | 'primary' + | 'success' + | 'warning' + | 'error' + | 'info' + | 'white' + | 'black' + | 'text' + | 'strong' + | 'brand' export interface IIconProps { name: keyof typeof Icons @@ -21,4 +32,4 @@ export const Icon = (props: IIconProps) => { Icon.defaultProps = { color: 'default', size: 'lg', -} satisfies Partial +} satisfies Partial \ No newline at end of file diff --git a/src/components/general/Icon/icon.css b/src/components/general/Icon/icon.css index b1ac771d2..cdd08efd8 100644 --- a/src/components/general/Icon/icon.css +++ b/src/components/general/Icon/icon.css @@ -1,49 +1,49 @@ +.icon-size-xxxxl { + width: var(--mp-icon-size-xxxxl); + min-width: var(--mp-icon-size-xxxxl); + height: var(--mp-icon-size-xxxxl); +} + +.icon-size-xxxl { + width: var(--mp-icon-size-xxxl); + min-width: var(--mp-icon-size-xxxl); + height: var(--mp-icon-size-xxxl); +} + .icon-size-xxl { - width: var(--size-xxl); - min-width: var(--size-xxl); - height: var(--size-xxl); + width: var(--mp-icon-size-xxl); + min-width: var(--mp-icon-size-xxl); + height: var(--mp-icon-size-xxl); } .icon-size-xl { - width: var(--size-xl); - min-width: var(--size-xl); - height: var(--size-xl); + width: var(--mp-icon-size-xl); + min-width: var(--mp-icon-size-xl); + height: var(--mp-icon-size-xl); } .icon-size-lg { - width: var(--size-lg); - min-width: var(--size-lg); - height: var(--size-lg); + width: var(--mp-icon-size-lg); + min-width: var(--mp-icon-size-lg); + height: var(--mp-icon-size-lg); } .icon-size-md { - width: var(--size-md); - min-width: var(--size-md); - height: var(--size-md); -} - -.icon-size-ms { - width: var(--size-ms); - min-width: var(--size-ms); - height: var(--size-ms); + width: var(--mp-icon-size-md); + min-width: var(--mp-icon-size-md); + height: var(--mp-icon-size-md); } .icon-size-sm { - width: var(--size-sm); - min-width: var(--size-sm); - height: var(--size-sm); + width: var(--mp-icon-size-sm); + min-width: var(--mp-icon-size-sm); + height: var(--mp-icon-size-sm); } .icon-size-xs { - width: var(--size-xs); - min-width: var(--size-xs); - height: var(--size-xs); -} - -.icon-size-xxs { - width: var(--size-xxs); - min-width: var(--size-xxs); - height: var(--size-xxs); + width: var(--mp-icon-size-xs); + min-width: var(--mp-icon-size-xs); + height: var(--mp-icon-size-xs); } .icon-color-primary { @@ -74,6 +74,14 @@ color: var(--color-icon); } +.icon-color-brand { + color: var(--mp-color-icon-brand); +} + +.icon-color-strong { + color: var(--mp-color-icon-strong); +} + .icon-color-white { color: white; } diff --git a/src/components/navigation/Breadcrumb/Breadcrumb.stories.tsx b/src/components/navigation/Breadcrumb/Breadcrumb.stories.tsx index 650576b17..a9daa05af 100644 --- a/src/components/navigation/Breadcrumb/Breadcrumb.stories.tsx +++ b/src/components/navigation/Breadcrumb/Breadcrumb.stories.tsx @@ -89,7 +89,7 @@ export const ExampleIcon: Story = { href: '', title: (
- + Application List
), @@ -221,4 +221,4 @@ export const ExampleIndependentSeparators: Story = { ) }, -} +} \ No newline at end of file diff --git a/src/components/navigation/GlobalNavigation/NavigationCreate.tsx b/src/components/navigation/GlobalNavigation/NavigationCreate.tsx index afd4e9125..94659bb53 100644 --- a/src/components/navigation/GlobalNavigation/NavigationCreate.tsx +++ b/src/components/navigation/GlobalNavigation/NavigationCreate.tsx @@ -59,7 +59,7 @@ export function NavigationCreate(props: INavigationCreateProps) { {item.title} {item.isLoading && } - {isLocked && } + {isLocked && } {item.description} diff --git a/src/components/navigation/GlobalNavigation/WorkspaceSelector/WorkspaceSelector.tsx b/src/components/navigation/GlobalNavigation/WorkspaceSelector/WorkspaceSelector.tsx index efdd64058..e3d826e16 100644 --- a/src/components/navigation/GlobalNavigation/WorkspaceSelector/WorkspaceSelector.tsx +++ b/src/components/navigation/GlobalNavigation/WorkspaceSelector/WorkspaceSelector.tsx @@ -196,7 +196,7 @@ export function WorkspaceSelector(props: IWorkspaceSelectorProps) { label: ( {workspace.label} - {workspace.isActive && } + {workspace.isActive && } ), id: workspace.id, @@ -262,4 +262,4 @@ export function WorkspaceSelector(props: IWorkspaceSelectorProps) { } } } -} +} \ No newline at end of file diff --git a/src/components/navigation/Steps/Steps.stories.tsx b/src/components/navigation/Steps/Steps.stories.tsx index e37cc9a98..14e7d093b 100644 --- a/src/components/navigation/Steps/Steps.stories.tsx +++ b/src/components/navigation/Steps/Steps.stories.tsx @@ -195,7 +195,7 @@ export const ExampleIcon: Story = { { title: 'Done', status: 'wait', - icon: , + icon: , }, ]} /> @@ -737,4 +737,4 @@ export const ExampleInline: Story = { ) }, -} +} \ No newline at end of file diff --git a/src/styles/_variables.css b/src/styles/_variables.css index a7bab12b1..6c637daa2 100644 --- a/src/styles/_variables.css +++ b/src/styles/_variables.css @@ -47,7 +47,7 @@ --wireframe: false; --motion: true; --color-link-hover: #ab8eff; - --control-outline: rgba(0.21176470816135406, 0, 0.8196078538894653, 0.1); + --control-outline: rgba(54, 0, 209, 0.1); --color-warning-outline: #fffbe6; --color-error-outline: #fff1f0; --control-item-bg-hover: #f8f6fb; @@ -92,7 +92,7 @@ --color-error-text-hover: #a8071a; --color-error-text: #820014; --color-error-text-active: #5c0011; - --color-bg-mask: #babbb5; + --color-bg-mask: rgba(0, 0, 0, 0.45); --border-radius-lg: 16px; --mp-brand-primary-1: #f8f6fb; --mp-brand-primary-2: #ebe8f8; @@ -115,6 +115,16 @@ --mp-brand-secondary-9: #212020; --mp-brand-secondary-10: #0f0e0e; --mp-color-border-disabled: #dcdcd8; + --mp-color-icon-strong: #0f0e0e; + --mp-color-icon-brand: #20007a; + --mp-icon-size-xs: 12px; + --mp-icon-size-sm: 16px; + --mp-icon-size-md: 20px; + --mp-icon-size-lg: 24px; + --mp-icon-size-xl: 28px; + --mp-icon-size-xxl: 32px; + --mp-icon-size-xxxl: 40px; + --mp-icon-size-xxxxl: 48px; --mp-query-item-border-width: 0 0 1px 0; --mp-query-item-border-color: #c3aeff; --mp-query-item-border-color-active: #3600d1; diff --git a/src/styles/style.ts b/src/styles/style.ts index 754fd2faa..6d8fc365e 100644 --- a/src/styles/style.ts +++ b/src/styles/style.ts @@ -46,7 +46,7 @@ export const OpacityImage = 1 export const Wireframe = false export const Motion = true export const ColorLinkHover = '#ab8eff' -export const ControlOutline = 'rgba(0.21176470816135406, 0, 0.8196078538894653, 0.1)' +export const ControlOutline = 'rgba(54, 0, 209, 0.1)' export const ColorWarningOutline = '#fffbe6' export const ColorErrorOutline = '#fff1f0' export const ControlItemBgHover = '#f8f6fb' @@ -91,7 +91,7 @@ export const ColorErrorActive = '#cf1322' export const ColorErrorTextHover = '#a8071a' export const ColorErrorText = '#820014' export const ColorErrorTextActive = '#5c0011' -export const ColorBgMask = '#babbb5' +export const ColorBgMask = 'rgba(0, 0, 0, 0.45)' export const BorderRadiusLg = '16px' export const MpBrandPrimary1 = '#f8f6fb' export const MpBrandPrimary2 = '#ebe8f8' @@ -103,7 +103,7 @@ export const MpBrandPrimary7 = '#5f29f8' export const MpBrandPrimary8 = '#3600d1' export const MpBrandPrimary9 = '#2c00aa' export const MpBrandPrimary10 = '#20007a' -export const MpBrandSecondary1 = '#fff' +export const MpBrandSecondary1 = '#ffffff' export const MpBrandSecondary2 = '#faf9f8' export const MpBrandSecondary3 = '#eceae9' export const MpBrandSecondary4 = '#dcdcd8' @@ -114,6 +114,16 @@ export const MpBrandSecondary8 = '#2c2d2b' export const MpBrandSecondary9 = '#212020' export const MpBrandSecondary10 = '#0f0e0e' export const MpColorBorderDisabled = '#dcdcd8' +export const MpColorIconStrong = '#0f0e0e' +export const MpColorIconBrand = '#20007a' +export const MpIconSizeXs = '12px' +export const MpIconSizeSm = '16px' +export const MpIconSizeMd = '20px' +export const MpIconSizeLg = '24px' +export const MpIconSizeXl = '28px' +export const MpIconSizeXxl = '32px' +export const MpIconSizeXxxl = '40px' +export const MpIconSizeXxxxl = '48px' export const MpQueryItemBorderWidth = '0 0 1px 0' export const MpQueryItemBorderColor = '#c3aeff' export const MpQueryItemBorderColorActive = '#3600d1' @@ -126,7 +136,7 @@ export const MpQueryItemBgColorDisabled = '#faf9f8' export const MpQueryItemBorderWidthActive = '0 0 2px 0' export const MpQueryItemShadowFocus = '0 0 0 2px rgba(54, 0, 209, 0.1)' export const MpQueryItemColorDisabled = '#505249' -export const MpQueryItemValueSelectorFontWeight = '600' +export const MpQueryItemValueSelectorFontWeight = '500' export const MpQueryItemValueSelectorColor = '#20007a' export const MpQueryItemPadding = '4px' export const MpQueryItemGap = '4px' From 946439e09140c4cd3a980436b1dc6fff2a209e2e Mon Sep 17 00:00:00 2001 From: Gaby Zifferman Date: Tue, 21 May 2024 19:21:39 +0200 Subject: [PATCH 12/26] add / replace extra icons --- src/assets/svg/analytics.svg | 14 +++++----- src/assets/svg/mp_act_it_upload.svg | 3 +++ src/assets/svg/mp_pm_dt_analytics.svg | 10 +++++++ src/assets/svg/mp_pm_dt_c360.svg | 4 +++ src/assets/svg/mp_pm_dt_data-platform.svg | 4 +++ src/assets/svg/mp_pm_dt_oversight.svg | 11 ++++++++ src/assets/svg/mp_pm_dt_predictions.svg | 4 +++ src/assets/svg/mp_pm_dt_segmentation.svg | 4 +++ src/assets/svg/mp_pm_lt_identity.svg | 2 +- src/assets/svg/mp_pm_lt_userprofiles.svg | 3 +++ src/components/icons/index.ts | 32 ++++++++++++++++------- src/constants/Icons.ts | 16 ++++++++++-- 12 files changed, 87 insertions(+), 20 deletions(-) create mode 100644 src/assets/svg/mp_act_it_upload.svg create mode 100644 src/assets/svg/mp_pm_dt_analytics.svg create mode 100644 src/assets/svg/mp_pm_dt_c360.svg create mode 100644 src/assets/svg/mp_pm_dt_data-platform.svg create mode 100644 src/assets/svg/mp_pm_dt_oversight.svg create mode 100644 src/assets/svg/mp_pm_dt_predictions.svg create mode 100644 src/assets/svg/mp_pm_dt_segmentation.svg create mode 100644 src/assets/svg/mp_pm_lt_userprofiles.svg diff --git a/src/assets/svg/analytics.svg b/src/assets/svg/analytics.svg index e2632334e..5b2bff0be 100644 --- a/src/assets/svg/analytics.svg +++ b/src/assets/svg/analytics.svg @@ -1,8 +1,8 @@ - - - - - - - + + + + + + + diff --git a/src/assets/svg/mp_act_it_upload.svg b/src/assets/svg/mp_act_it_upload.svg new file mode 100644 index 000000000..ac9933dfb --- /dev/null +++ b/src/assets/svg/mp_act_it_upload.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/svg/mp_pm_dt_analytics.svg b/src/assets/svg/mp_pm_dt_analytics.svg new file mode 100644 index 000000000..eb95173dd --- /dev/null +++ b/src/assets/svg/mp_pm_dt_analytics.svg @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/svg/mp_pm_dt_c360.svg b/src/assets/svg/mp_pm_dt_c360.svg new file mode 100644 index 000000000..7715d6729 --- /dev/null +++ b/src/assets/svg/mp_pm_dt_c360.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/assets/svg/mp_pm_dt_data-platform.svg b/src/assets/svg/mp_pm_dt_data-platform.svg new file mode 100644 index 000000000..c1415a42a --- /dev/null +++ b/src/assets/svg/mp_pm_dt_data-platform.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/assets/svg/mp_pm_dt_oversight.svg b/src/assets/svg/mp_pm_dt_oversight.svg new file mode 100644 index 000000000..06a81482e --- /dev/null +++ b/src/assets/svg/mp_pm_dt_oversight.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/svg/mp_pm_dt_predictions.svg b/src/assets/svg/mp_pm_dt_predictions.svg new file mode 100644 index 000000000..ed7b8eac9 --- /dev/null +++ b/src/assets/svg/mp_pm_dt_predictions.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/assets/svg/mp_pm_dt_segmentation.svg b/src/assets/svg/mp_pm_dt_segmentation.svg new file mode 100644 index 000000000..a97198d4b --- /dev/null +++ b/src/assets/svg/mp_pm_dt_segmentation.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/assets/svg/mp_pm_lt_identity.svg b/src/assets/svg/mp_pm_lt_identity.svg index 750072ba1..471c117d6 100644 --- a/src/assets/svg/mp_pm_lt_identity.svg +++ b/src/assets/svg/mp_pm_lt_identity.svg @@ -1,3 +1,3 @@ - + \ No newline at end of file diff --git a/src/assets/svg/mp_pm_lt_userprofiles.svg b/src/assets/svg/mp_pm_lt_userprofiles.svg new file mode 100644 index 000000000..8faa02b3f --- /dev/null +++ b/src/assets/svg/mp_pm_lt_userprofiles.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts index bd9c9693e..902328cc9 100644 --- a/src/components/icons/index.ts +++ b/src/components/icons/index.ts @@ -1,16 +1,16 @@ -import ChartLineIcon from 'src/assets/svg/chart-line.svg?react' -import ConnectionsIcon from 'src/assets/svg/connections.svg?react' -import DatabaseIcon from 'src/assets/svg/database.svg?react' -import GridIcon from 'src/assets/svg/grid.svg?react' -import CheckIcon from 'src/assets/svg/check.svg?react' -import ShieldKeyholeIcon from 'src/assets/svg/shield-keyhole.svg?react' import AddIcon from 'src/assets/svg/add.svg?react' import AlicornIcon from 'src/assets/svg/alicorn.svg?react' -import AnalyticsIcon from 'src/assets/svg/analytics.svg?react' +import AnalyticsIcon from 'src/assets/svg/mp_pm_dt_analytics.svg?react' +import C360Icon 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 DataPlatform 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' @@ -19,6 +19,7 @@ import EventIcon from 'src/assets/svg/event.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' @@ -29,23 +30,29 @@ import LockIcon from 'src/assets/svg/lock.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 OversightIcon from 'src/assets/svg/mp_pm_dt_oversight.svg?react' +import PredictionsIcon 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 SegmentationIcon 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 SiteMapIcon from 'src/assets/svg/sitemap.svg?react' import SparklesIcon from 'src/assets/svg/sparkles.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/users.svg?react' -import UserProfileIcon from 'src/assets/svg/mp_pm_lt_user.svg?react' import WrenchIcon from 'src/assets/svg/wrench.svg?react' export { AddIcon, AlicornIcon, AnalyticsIcon, + C360Icon, CatalogIcon, ChartColumnIcon, ChartLineIcon, @@ -53,6 +60,7 @@ export { CircleNodesIcon, CloudIcon, ConnectionsIcon, + DataPlatform, DatabaseIcon, DsrIcon, EmptyIcon, @@ -73,17 +81,21 @@ export { MessageQuestionIcon, MpLogoIcon, ObservabilityIcon, + OversightIcon, + PredictionsIcon, RemoveIcon, - ShieldKeyholeIcon, SearchIcon, + SegmentationIcon, + ShieldKeyholeIcon, SignoutIcon, SiteMapIcon, SparklesIcon, SplitIcon, SystemAlertsIcon, TransformationsIcon, + UploadIcon, UserAttributeIcon, + UserProfilesIcon, UsersIcon, - UserProfileIcon, WrenchIcon, } diff --git a/src/constants/Icons.ts b/src/constants/Icons.ts index 3e0428cba..eb6f372be 100644 --- a/src/constants/Icons.ts +++ b/src/constants/Icons.ts @@ -2,6 +2,7 @@ import { AddIcon, AlicornIcon, AnalyticsIcon, + C360Icon, CatalogIcon, ChartColumnIcon, ChartLineIcon, @@ -9,6 +10,7 @@ import { CircleNodesIcon, CloudIcon, ConnectionsIcon, + DataPlatform, DatabaseIcon, DsrIcon, EmptyIcon, @@ -29,8 +31,11 @@ import { MessageQuestionIcon, MpLogoIcon, ObservabilityIcon, + OversightIcon, + PredictionsIcon, RemoveIcon, SearchIcon, + SegmentationIcon, ShieldKeyholeIcon, SignoutIcon, SiteMapIcon, @@ -38,8 +43,9 @@ import { SplitIcon, SystemAlertsIcon, TransformationsIcon, + UploadIcon, UserAttributeIcon, - UserProfileIcon, + UserProfilesIcon, UsersIcon, WrenchIcon, } from 'src/components/icons' @@ -48,6 +54,7 @@ export const Icons = { add: AddIcon, alicorn: AlicornIcon, analytics: AnalyticsIcon, + C360: C360Icon, catalog: CatalogIcon, chartColumn: ChartColumnIcon, chartLine: ChartLineIcon, @@ -55,6 +62,7 @@ export const Icons = { circleNodes: CircleNodesIcon, cloud: CloudIcon, connections: ConnectionsIcon, + dataPlatform: DataPlatform, database: DatabaseIcon, dsr: DsrIcon, empty: EmptyIcon, @@ -75,17 +83,21 @@ export const Icons = { messageQuestion: MessageQuestionIcon, mpLogo: MpLogoIcon, observability: ObservabilityIcon, + oversight: OversightIcon, + predictions: PredictionsIcon, remove: RemoveIcon, shieldKeyhole: ShieldKeyholeIcon, search: SearchIcon, + segmentation: SegmentationIcon, signout: SignoutIcon, siteMap: SiteMapIcon, sparkles: SparklesIcon, split: SplitIcon, systemAlerts: SystemAlertsIcon, transformation: TransformationsIcon, + upload: UploadIcon, userAttribute: UserAttributeIcon, - userProfile: UserProfileIcon, + userProfiles: UserProfilesIcon, users: UsersIcon, wrench: WrenchIcon, } as const From c23350e6f95951690dd3afa95d1afadaacbe67e5 Mon Sep 17 00:00:00 2001 From: Gaby Zifferman Date: Tue, 21 May 2024 19:24:05 +0200 Subject: [PATCH 13/26] Delete src/assets/svg/mp_pm_lt_user.svg --- src/assets/svg/mp_pm_lt_user.svg | 5 ----- 1 file changed, 5 deletions(-) delete mode 100644 src/assets/svg/mp_pm_lt_user.svg diff --git a/src/assets/svg/mp_pm_lt_user.svg b/src/assets/svg/mp_pm_lt_user.svg deleted file mode 100644 index f66a81238..000000000 --- a/src/assets/svg/mp_pm_lt_user.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - \ No newline at end of file From 0471da9ae3437d57a9bf25f9471e0dff2267a63c Mon Sep 17 00:00:00 2001 From: Gaby Zifferman Date: Tue, 21 May 2024 20:20:13 +0200 Subject: [PATCH 14/26] remove extra icons --- src/assets/svg/sitemap.svg | 4 ---- src/assets/svg/sparkles.svg | 4 ---- src/components/icons/index.ts | 4 ---- src/constants/Icons.ts | 8 ++------ 4 files changed, 2 insertions(+), 18 deletions(-) delete mode 100644 src/assets/svg/sitemap.svg delete mode 100644 src/assets/svg/sparkles.svg diff --git a/src/assets/svg/sitemap.svg b/src/assets/svg/sitemap.svg deleted file mode 100644 index 91e0913d7..000000000 --- a/src/assets/svg/sitemap.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/assets/svg/sparkles.svg b/src/assets/svg/sparkles.svg deleted file mode 100644 index 668b42f05..000000000 --- a/src/assets/svg/sparkles.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts index 902328cc9..833bcd720 100644 --- a/src/components/icons/index.ts +++ b/src/components/icons/index.ts @@ -37,8 +37,6 @@ import SearchIcon from 'src/assets/svg/search.svg?react' import SegmentationIcon 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 SiteMapIcon from 'src/assets/svg/sitemap.svg?react' -import SparklesIcon from 'src/assets/svg/sparkles.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' @@ -88,8 +86,6 @@ export { SegmentationIcon, ShieldKeyholeIcon, SignoutIcon, - SiteMapIcon, - SparklesIcon, SplitIcon, SystemAlertsIcon, TransformationsIcon, diff --git a/src/constants/Icons.ts b/src/constants/Icons.ts index eb6f372be..df9632d5c 100644 --- a/src/constants/Icons.ts +++ b/src/constants/Icons.ts @@ -38,8 +38,6 @@ import { SegmentationIcon, ShieldKeyholeIcon, SignoutIcon, - SiteMapIcon, - SparklesIcon, SplitIcon, SystemAlertsIcon, TransformationsIcon, @@ -62,7 +60,6 @@ export const Icons = { circleNodes: CircleNodesIcon, cloud: CloudIcon, connections: ConnectionsIcon, - dataPlatform: DataPlatform, database: DatabaseIcon, dsr: DsrIcon, empty: EmptyIcon, @@ -84,14 +81,13 @@ export const Icons = { mpLogo: MpLogoIcon, observability: ObservabilityIcon, oversight: OversightIcon, - predictions: PredictionsIcon, remove: RemoveIcon, shieldKeyhole: ShieldKeyholeIcon, search: SearchIcon, segmentation: SegmentationIcon, signout: SignoutIcon, - siteMap: SiteMapIcon, - sparkles: SparklesIcon, + siteMap: DataPlatform, + sparkles: PredictionsIcon, split: SplitIcon, systemAlerts: SystemAlertsIcon, transformation: TransformationsIcon, From 873bc8b41f390e64ee07a900896bec5242d63f75 Mon Sep 17 00:00:00 2001 From: mparticle-automation Date: Tue, 21 May 2024 18:22:36 +0000 Subject: [PATCH 15/26] chore(release): 1.15.0-icons-integration.1 [skip ci] # [1.15.0-icons-integration.1](https://github.com/mParticle/aquarium/compare/v1.14.0...v1.15.0-icons-integration.1) (2024-05-21) ### Features * icon sizes ([#238](https://github.com/mParticle/aquarium/issues/238)) ([e093faa](https://github.com/mParticle/aquarium/commit/e093faa550fc731e1b16c668c702c47c7300be8e)) --- CHANGELOG.md | 7 +++++++ package-lock.json | 4 ++-- package.json | 2 +- 3 files changed, 10 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3d0fc7e3d..c87285ade 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,10 @@ +# [1.15.0-icons-integration.1](https://github.com/mParticle/aquarium/compare/v1.14.0...v1.15.0-icons-integration.1) (2024-05-21) + + +### Features + +* icon sizes ([#238](https://github.com/mParticle/aquarium/issues/238)) ([e093faa](https://github.com/mParticle/aquarium/commit/e093faa550fc731e1b16c668c702c47c7300be8e)) + # [1.14.0](https://github.com/mParticle/aquarium/compare/v1.13.0...v1.14.0) (2024-05-20) diff --git a/package-lock.json b/package-lock.json index 295e7f960..49b73d9ca 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@mparticle/aquarium", - "version": "1.14.0", + "version": "1.15.0-icons-integration.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@mparticle/aquarium", - "version": "1.14.0", + "version": "1.15.0-icons-integration.1", "license": "Apache-2.0", "dependencies": { "lodash.clonedeep": "4.5.0" diff --git a/package.json b/package.json index 2b2c7abc7..11408acc0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@mparticle/aquarium", - "version": "1.14.0", + "version": "1.15.0-icons-integration.1", "description": "mParticle Component Library", "license": "Apache-2.0", "keywords": [ From d4c206abf442579b84c6f3340fa7f1b00523c71a Mon Sep 17 00:00:00 2001 From: Gaby Zifferman Date: Wed, 22 May 2024 18:34:19 -0300 Subject: [PATCH 16/26] feat: add possibility to add background color to the suite icon logo (#241) --- src/components/general/Icon/Icon.tsx | 4 +- .../GlobalNavigation.stories.tsx | 92 ++++++++++++++++++- .../GlobalNavigation/GlobalNavigation.tsx | 13 ++- .../GlobalNavigationItems.d.ts | 5 +- .../navigation/GlobalNavigation/SuiteLogo.tsx | 37 +++++++- .../GlobalNavigation/global-navigation.css | 18 +++- 6 files changed, 151 insertions(+), 18 deletions(-) diff --git a/src/components/general/Icon/Icon.tsx b/src/components/general/Icon/Icon.tsx index 01e236974..046c0d292 100644 --- a/src/components/general/Icon/Icon.tsx +++ b/src/components/general/Icon/Icon.tsx @@ -2,7 +2,7 @@ import { Icons } from 'src/constants/Icons' import './icon.css' type IconSize = 'xxxxl' | 'xxxl' | 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs' -type IconColor = +export type IconColor = | 'default' | 'primary' | 'success' @@ -32,4 +32,4 @@ export const Icon = (props: IIconProps) => { Icon.defaultProps = { color: 'default', size: 'lg', -} satisfies Partial \ No newline at end of file +} satisfies Partial diff --git a/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx b/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx index c794dfbb8..47e0e9f2a 100644 --- a/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx +++ b/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx @@ -13,7 +13,8 @@ import { useNewExperienceReminder } from 'src/hooks/NewExperienceReminder/useNew const defaultLogo: IGlobalNavigationLogo = { label: 'Aqua', - icon: , + icon: , + type: 'custom-size', onSuiteLogoClick: () => { alert('Going to Aqua Home!') }, @@ -165,7 +166,25 @@ export const Primary: Story = { const mpLogo: IGlobalNavigationLogo = { label: 'Data Platform', - icon: , + icon: , + onSuiteLogoClick: () => { + alert('Going to mP Home!') + }, +} + +const mpLogoWithBackground: IGlobalNavigationLogo = { + label: 'Data Platform', + icon: 'catalog', + type: 'background-solid', + onSuiteLogoClick: () => { + alert('Going to mP Home!') + }, +} + +const mpLogoWithoutCustomSizeLogo: IGlobalNavigationLogo = { + label: 'Data Platform', + icon: 'catalog', + type: 'default', onSuiteLogoClick: () => { alert('Going to mP Home!') }, @@ -834,7 +853,8 @@ export const Indicative: Story = { const cortexLogo: IGlobalNavigationLogo = { label: 'Predictions', - icon: , + icon: 'sparkles', + type: 'background-solid', onSuiteLogoClick: () => { alert('Going to Predictions Home!') }, @@ -1063,3 +1083,69 @@ export const UseNewExperienceReminderHook: Story = { }, }, } + +export const MPWithoutLogo: Story = { + args: { + onSearchClick: () => { + alert('Searching!') + }, + logo: { + onSuiteLogoClick: () => {}, + label: '', + }, + tools: mpTools, + management: mpManagement, + orgs: mpOrgs, + minimapOptions: { overviewHref: '/', show: true }, + onMpHomeClick: () => { + alert('going to overview map') + }, + avatarOptions: { + // src: "https://static-qa1.qa.corp.mparticle.com/appimg/logo_af_916397d2-9732-8de6-77cc-80e3bba120ca.png", + alt: 'avatar', + }, + showSuiteLogo: false, + }, +} + +export const MPWithBackgroundLogo: Story = { + args: { + onSearchClick: () => { + alert('Searching!') + }, + logo: mpLogoWithBackground, + tools: mpTools, + management: mpManagement, + orgs: mpOrgs, + minimapOptions: { overviewHref: '/', show: true }, + onMpHomeClick: () => { + alert('going to overview map') + }, + avatarOptions: { + // src: "https://static-qa1.qa.corp.mparticle.com/appimg/logo_af_916397d2-9732-8de6-77cc-80e3bba120ca.png", + alt: 'avatar', + }, + showSuiteLogo: true, + }, +} + +export const MPWithoutCustomSizeLogo: Story = { + args: { + onSearchClick: () => { + alert('Searching!') + }, + logo: mpLogoWithoutCustomSizeLogo, + tools: mpTools, + management: mpManagement, + orgs: mpOrgs, + minimapOptions: { overviewHref: '/', show: true }, + onMpHomeClick: () => { + alert('going to overview map') + }, + avatarOptions: { + // src: "https://static-qa1.qa.corp.mparticle.com/appimg/logo_af_916397d2-9732-8de6-77cc-80e3bba120ca.png", + alt: 'avatar', + }, + showSuiteLogo: true, + }, +} diff --git a/src/components/navigation/GlobalNavigation/GlobalNavigation.tsx b/src/components/navigation/GlobalNavigation/GlobalNavigation.tsx index e77df6f07..76aaed9b1 100644 --- a/src/components/navigation/GlobalNavigation/GlobalNavigation.tsx +++ b/src/components/navigation/GlobalNavigation/GlobalNavigation.tsx @@ -30,6 +30,7 @@ export interface IGlobalNavigationProps { onSuiteLogoClick?: () => void onMpHomeClick: () => void hideMpHome?: boolean + showSuiteLogo?: boolean avatarOptions?: IAvatarProps navigationButtonItemOptions?: { label: string @@ -50,8 +51,12 @@ export const GlobalNavigation = (props: IGlobalNavigationProps) => {
- -
+ {props.showSuiteLogo && ( + <> + +
+ + )}
{props.onSearchClick && } {props.createItems && } @@ -88,3 +93,7 @@ export const GlobalNavigation = (props: IGlobalNavigationProps) => { } GlobalNavigation.useNewExperienceReminder = useNewExperienceReminder + +GlobalNavigation.defaultProps = { + showSuiteLogo: true, +} diff --git a/src/components/navigation/GlobalNavigation/GlobalNavigationItems.d.ts b/src/components/navigation/GlobalNavigation/GlobalNavigationItems.d.ts index bd074d2ed..734a7c0ca 100644 --- a/src/components/navigation/GlobalNavigation/GlobalNavigationItems.d.ts +++ b/src/components/navigation/GlobalNavigation/GlobalNavigationItems.d.ts @@ -1,5 +1,6 @@ -import type { ReactNode, type MouseEvent } from 'react' +import type { ReactNode, type MouseEvent, ReactElement } from 'react' import { type HrefOptions } from 'src/utils/utils' +import { Icons } from 'src/constants/Icons' export interface IBaseGlobalNavigationItem { type?: 'menu' | 'link' @@ -11,6 +12,8 @@ export interface IBaseGlobalNavigationItem { export interface IGlobalNavigationLogo extends IBaseGlobalNavigationItem { onSuiteLogoClick: () => void + type?: 'default' | 'background-solid' | 'custom-size' + icon?: ReactElement | keyof typeof Icons } export interface IGlobalNavigationMenu extends IBaseGlobalNavigationItem { diff --git a/src/components/navigation/GlobalNavigation/SuiteLogo.tsx b/src/components/navigation/GlobalNavigation/SuiteLogo.tsx index 9f38effce..b93adb760 100644 --- a/src/components/navigation/GlobalNavigation/SuiteLogo.tsx +++ b/src/components/navigation/GlobalNavigation/SuiteLogo.tsx @@ -1,12 +1,39 @@ -import { Center } from 'src/components' +import React, { ReactElement, ReactNode } from 'react' +import { Center, Icon } from 'src/components' import { NavigationIcon } from 'src/components/navigation/GlobalNavigation/NavigationIcon' +import { Icons } from 'src/constants/Icons' import { type IGlobalNavigationLogo } from 'src/components/navigation/GlobalNavigation/GlobalNavigationItems' +import { IconColor } from 'src/components/general/Icon/Icon' + +// custom-size is the default size to prevent breaking changes. +function isStringIcon(icon: ReactNode | string): icon is keyof typeof Icons { + return typeof icon === 'string' +} + +export function SuiteLogo({ icon, label, type = 'custom-size', onSuiteLogoClick }: IGlobalNavigationLogo) { + const classMap = { + default: '', + 'custom-size': 'globalNavigation__icon--suiteLogo', + 'background-solid': 'globalNavigation__icon--suiteBackground', + } + + const iconColorMap: { [key in 'default' | 'background-solid' | 'custom-size']: IconColor } = { + default: 'default', + 'background-solid': 'brand', + 'custom-size': 'default', + } + + const getIcon = () => { + if (isStringIcon(icon)) { + return + } + return icon + } -export function SuiteLogo(props: IGlobalNavigationLogo) { return ( -
- - {props.label} +
+ + {label}
) } diff --git a/src/components/navigation/GlobalNavigation/global-navigation.css b/src/components/navigation/GlobalNavigation/global-navigation.css index 3f574bef1..7b8c9b0a3 100644 --- a/src/components/navigation/GlobalNavigation/global-navigation.css +++ b/src/components/navigation/GlobalNavigation/global-navigation.css @@ -240,11 +240,6 @@ padding-bottom: var(--padding-xxs); } -.globalNavigation__icon.globalNavigation__icon--suiteLogo svg { - width: 36px; - height: 36px; -} - .globalNavigation__menu .globalNavigation__iconLabel { margin-top: var(--margin-xxs); } @@ -295,6 +290,19 @@ cursor: pointer; } +.globalNavigation__icon--suiteBackground { + background-color: var(--mp-brand-primary-2); + padding: 10px; + margin-bottom: 8px; + border-radius: 100%; +} + +.globalNavigation__icon.globalNavigation__icon--suiteLogo svg { + width: 36px; + height: 36px; + +} + .globalNavigation__divider { border-bottom: 1px solid var(--color-border-secondary); margin-right: var(--margin-sm); From bba43eb96cff027e29dd067fc0e4a198b5692620 Mon Sep 17 00:00:00 2001 From: mparticle-automation Date: Wed, 22 May 2024 21:57:46 +0000 Subject: [PATCH 17/26] chore(release): 1.15.0-icons-integration.2 [skip ci] # [1.15.0-icons-integration.2](https://github.com/mParticle/aquarium/compare/v1.15.0-icons-integration.1...v1.15.0-icons-integration.2) (2024-05-22) ### Features * add possibility to add background color to the suite icon logo ([#241](https://github.com/mParticle/aquarium/issues/241)) ([d4c206a](https://github.com/mParticle/aquarium/commit/d4c206abf442579b84c6f3340fa7f1b00523c71a)) --- CHANGELOG.md | 7 +++++++ package-lock.json | 4 ++-- package.json | 2 +- 3 files changed, 10 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c87285ade..26cd994ed 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,10 @@ +# [1.15.0-icons-integration.2](https://github.com/mParticle/aquarium/compare/v1.15.0-icons-integration.1...v1.15.0-icons-integration.2) (2024-05-22) + + +### Features + +* add possibility to add background color to the suite icon logo ([#241](https://github.com/mParticle/aquarium/issues/241)) ([d4c206a](https://github.com/mParticle/aquarium/commit/d4c206abf442579b84c6f3340fa7f1b00523c71a)) + # [1.15.0-icons-integration.1](https://github.com/mParticle/aquarium/compare/v1.14.0...v1.15.0-icons-integration.1) (2024-05-21) diff --git a/package-lock.json b/package-lock.json index 49b73d9ca..971f6da5c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@mparticle/aquarium", - "version": "1.15.0-icons-integration.1", + "version": "1.15.0-icons-integration.2", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@mparticle/aquarium", - "version": "1.15.0-icons-integration.1", + "version": "1.15.0-icons-integration.2", "license": "Apache-2.0", "dependencies": { "lodash.clonedeep": "4.5.0" diff --git a/package.json b/package.json index 11408acc0..4112252a2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@mparticle/aquarium", - "version": "1.15.0-icons-integration.1", + "version": "1.15.0-icons-integration.2", "description": "mParticle Component Library", "license": "Apache-2.0", "keywords": [ From ca0901da0c936dd53ab34a7db1a6946877803b4d Mon Sep 17 00:00:00 2001 From: Gaby Zifferman Date: Thu, 23 May 2024 17:15:04 -0300 Subject: [PATCH 18/26] fix: Align button content to the center (#243) Co-authored-by: jared-dickman --- src/components/general/Button/Button.stories.tsx | 7 +++++++ src/components/general/Button/Button.tsx | 4 +++- src/utils/utils.css | 8 ++++++++ 3 files changed, 18 insertions(+), 1 deletion(-) diff --git a/src/components/general/Button/Button.stories.tsx b/src/components/general/Button/Button.stories.tsx index b2d312d4d..b5a63d116 100644 --- a/src/components/general/Button/Button.stories.tsx +++ b/src/components/general/Button/Button.stories.tsx @@ -112,6 +112,13 @@ export const WithIcon: Story = { }, } +export const WithIconSM: Story = { + args: { + type: 'default', + icon: , + }, +} + export const Loading: Story = { args: { loading: true, diff --git a/src/components/general/Button/Button.tsx b/src/components/general/Button/Button.tsx index 7bf8e9f44..163f03673 100644 --- a/src/components/general/Button/Button.tsx +++ b/src/components/general/Button/Button.tsx @@ -7,7 +7,9 @@ export interface IButtonProps extends AntButtonProps {} export const Button = (props: IButtonProps) => { return ( - {props.children} + + {props.children} + ) } diff --git a/src/utils/utils.css b/src/utils/utils.css index 741e91fd4..5e8a7a9f0 100644 --- a/src/utils/utils.css +++ b/src/utils/utils.css @@ -1,3 +1,11 @@ .u-display-none { display: none !important; } + +.u-display-flex { + display: flex !important; +} + +.u-align-items-center { + align-items: center !important; +} \ No newline at end of file From eb621b185065b61d5f269d84cedf02447b441a57 Mon Sep 17 00:00:00 2001 From: Gaby Zifferman Date: Thu, 23 May 2024 22:17:16 +0200 Subject: [PATCH 19/26] update suite logo size --- src/components/navigation/GlobalNavigation/SuiteLogo.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/navigation/GlobalNavigation/SuiteLogo.tsx b/src/components/navigation/GlobalNavigation/SuiteLogo.tsx index b93adb760..3eb083101 100644 --- a/src/components/navigation/GlobalNavigation/SuiteLogo.tsx +++ b/src/components/navigation/GlobalNavigation/SuiteLogo.tsx @@ -25,7 +25,7 @@ export function SuiteLogo({ icon, label, type = 'custom-size', onSuiteLogoClick const getIcon = () => { if (isStringIcon(icon)) { - return + return } return icon } From 3de3b96b95b23b3363e1ec013e4f3532392b7476 Mon Sep 17 00:00:00 2001 From: mparticle-automation Date: Thu, 23 May 2024 20:19:57 +0000 Subject: [PATCH 20/26] chore(release): 1.15.0-icons-integration.3 [skip ci] # [1.15.0-icons-integration.3](https://github.com/mParticle/aquarium/compare/v1.15.0-icons-integration.2...v1.15.0-icons-integration.3) (2024-05-23) ### Bug Fixes * Align button content to the center ([#243](https://github.com/mParticle/aquarium/issues/243)) ([ca0901d](https://github.com/mParticle/aquarium/commit/ca0901da0c936dd53ab34a7db1a6946877803b4d)) --- CHANGELOG.md | 7 +++++++ package-lock.json | 4 ++-- package.json | 2 +- 3 files changed, 10 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 26cd994ed..916211931 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,10 @@ +# [1.15.0-icons-integration.3](https://github.com/mParticle/aquarium/compare/v1.15.0-icons-integration.2...v1.15.0-icons-integration.3) (2024-05-23) + + +### Bug Fixes + +* Align button content to the center ([#243](https://github.com/mParticle/aquarium/issues/243)) ([ca0901d](https://github.com/mParticle/aquarium/commit/ca0901da0c936dd53ab34a7db1a6946877803b4d)) + # [1.15.0-icons-integration.2](https://github.com/mParticle/aquarium/compare/v1.15.0-icons-integration.1...v1.15.0-icons-integration.2) (2024-05-22) diff --git a/package-lock.json b/package-lock.json index 971f6da5c..358e55fb5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@mparticle/aquarium", - "version": "1.15.0-icons-integration.2", + "version": "1.15.0-icons-integration.3", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@mparticle/aquarium", - "version": "1.15.0-icons-integration.2", + "version": "1.15.0-icons-integration.3", "license": "Apache-2.0", "dependencies": { "lodash.clonedeep": "4.5.0" diff --git a/package.json b/package.json index 4112252a2..153281664 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@mparticle/aquarium", - "version": "1.15.0-icons-integration.2", + "version": "1.15.0-icons-integration.3", "description": "mParticle Component Library", "license": "Apache-2.0", "keywords": [ From 85edd8574108853f6220a3f1437d4abc873f7499 Mon Sep 17 00:00:00 2001 From: Gaby Zifferman Date: Fri, 24 May 2024 14:22:46 -0300 Subject: [PATCH 21/26] fix: button alignment (#244) --- src/components/general/Button/Button.stories.tsx | 13 ++++++++++++- src/components/general/Button/Button.tsx | 11 ++++++++--- 2 files changed, 20 insertions(+), 4 deletions(-) diff --git a/src/components/general/Button/Button.stories.tsx b/src/components/general/Button/Button.stories.tsx index b5a63d116..12b24b1c5 100644 --- a/src/components/general/Button/Button.stories.tsx +++ b/src/components/general/Button/Button.stories.tsx @@ -2,10 +2,11 @@ import { Button } from 'src/components/general/Button/Button' import { type Meta, type StoryObj } from '@storybook/react' import { userEvent } from '@storybook/test' import { Icon } from 'src/components' +import React from 'react' const meta: Meta = { title: 'Aquarium/General/Button', - component: props => , + component: props => , args: { block: false, @@ -116,9 +117,19 @@ export const WithIconSM: Story = { args: { type: 'default', icon: , + variant: 'with-icon', }, } +export const RoundIconButton: Story = { + args: { + icon: , + children: ' ', + type: 'default', + shape: 'round', + variant: 'with-icon', + }, +} export const Loading: Story = { args: { loading: true, diff --git a/src/components/general/Button/Button.tsx b/src/components/general/Button/Button.tsx index 163f03673..3e58aa95e 100644 --- a/src/components/general/Button/Button.tsx +++ b/src/components/general/Button/Button.tsx @@ -2,12 +2,17 @@ import { Button as AntButton } from 'antd' import { type ButtonProps as AntButtonProps } from 'antd' import { ConfigProvider } from 'src/components/other/ConfigProvider/ConfigProvider' -export interface IButtonProps extends AntButtonProps {} - +export interface IButtonProps extends AntButtonProps { + variant?: 'with-icon' +} export const Button = (props: IButtonProps) => { + const classMap = { + 'with-icon': 'u-display-flex u-align-items-center', + } + return ( - + {props.children} From c4b6f502522cad09936d3224f09ccbc783902d33 Mon Sep 17 00:00:00 2001 From: Gaby Zifferman Date: Fri, 24 May 2024 20:28:33 +0200 Subject: [PATCH 22/26] remove blank space from classname --- src/components/general/Button/Button.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/general/Button/Button.tsx b/src/components/general/Button/Button.tsx index 3e58aa95e..6fa88958f 100644 --- a/src/components/general/Button/Button.tsx +++ b/src/components/general/Button/Button.tsx @@ -12,7 +12,7 @@ export const Button = (props: IButtonProps) => { return ( - + {props.children} From 8902c95738885fe3fcd4dd3db6624eb1e3791a49 Mon Sep 17 00:00:00 2001 From: Gaby Zifferman Date: Fri, 24 May 2024 20:31:24 +0200 Subject: [PATCH 23/26] remove default props --- .../navigation/GlobalNavigation/GlobalNavigation.tsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src/components/navigation/GlobalNavigation/GlobalNavigation.tsx b/src/components/navigation/GlobalNavigation/GlobalNavigation.tsx index 76aaed9b1..9a4d4af6c 100644 --- a/src/components/navigation/GlobalNavigation/GlobalNavigation.tsx +++ b/src/components/navigation/GlobalNavigation/GlobalNavigation.tsx @@ -45,13 +45,13 @@ export interface IGlobalNavigationProps { export const GlobalNavWidth = 90 as const -export const GlobalNavigation = (props: IGlobalNavigationProps) => { +export const GlobalNavigation = ({ showSuiteLogo = true, ...props }: IGlobalNavigationProps) => { return (
- {props.showSuiteLogo && ( + {showSuiteLogo && ( <>
@@ -93,7 +93,3 @@ export const GlobalNavigation = (props: IGlobalNavigationProps) => { } GlobalNavigation.useNewExperienceReminder = useNewExperienceReminder - -GlobalNavigation.defaultProps = { - showSuiteLogo: true, -} From aeaf1f63a76c356b208d143eee8d52299c794d13 Mon Sep 17 00:00:00 2001 From: Gaby Zifferman Date: Fri, 24 May 2024 20:34:04 +0200 Subject: [PATCH 24/26] make a colortype option --- src/components/navigation/GlobalNavigation/SuiteLogo.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/navigation/GlobalNavigation/SuiteLogo.tsx b/src/components/navigation/GlobalNavigation/SuiteLogo.tsx index 3eb083101..c29212590 100644 --- a/src/components/navigation/GlobalNavigation/SuiteLogo.tsx +++ b/src/components/navigation/GlobalNavigation/SuiteLogo.tsx @@ -6,6 +6,8 @@ import { type IGlobalNavigationLogo } from 'src/components/navigation/GlobalNavi import { IconColor } from 'src/components/general/Icon/Icon' // custom-size is the default size to prevent breaking changes. +type IconColorOptions = 'default' | 'background-solid' | 'custom-size' + function isStringIcon(icon: ReactNode | string): icon is keyof typeof Icons { return typeof icon === 'string' } @@ -17,7 +19,7 @@ export function SuiteLogo({ icon, label, type = 'custom-size', onSuiteLogoClick 'background-solid': 'globalNavigation__icon--suiteBackground', } - const iconColorMap: { [key in 'default' | 'background-solid' | 'custom-size']: IconColor } = { + const iconColorMap: { [key in IconColorOptions]: IconColor } = { default: 'default', 'background-solid': 'brand', 'custom-size': 'default', From 3b9c6ea9dd4e464bd57b863539f7129073a1f7a4 Mon Sep 17 00:00:00 2001 From: Gaby Zifferman Date: Fri, 24 May 2024 22:03:00 +0200 Subject: [PATCH 25/26] rename variant add comment --- src/components/general/Button/Button.stories.tsx | 4 ++-- src/components/general/Button/Button.tsx | 9 +++++++-- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/src/components/general/Button/Button.stories.tsx b/src/components/general/Button/Button.stories.tsx index 12b24b1c5..6452aa57a 100644 --- a/src/components/general/Button/Button.stories.tsx +++ b/src/components/general/Button/Button.stories.tsx @@ -117,7 +117,7 @@ export const WithIconSM: Story = { args: { type: 'default', icon: , - variant: 'with-icon', + variant: 'with-new-icon', }, } @@ -127,7 +127,7 @@ export const RoundIconButton: Story = { children: ' ', type: 'default', shape: 'round', - variant: 'with-icon', + variant: 'with-new-icon', }, } export const Loading: Story = { diff --git a/src/components/general/Button/Button.tsx b/src/components/general/Button/Button.tsx index 6fa88958f..f83c5abe6 100644 --- a/src/components/general/Button/Button.tsx +++ b/src/components/general/Button/Button.tsx @@ -3,11 +3,16 @@ import { type ButtonProps as AntButtonProps } from 'antd' import { ConfigProvider } from 'src/components/other/ConfigProvider/ConfigProvider' export interface IButtonProps extends AntButtonProps { - variant?: 'with-icon' + /** + * @deprecated This variant is a temporary fix for new icons. + * Use this variant only with new icons to align the icon and text centered. + * This will be removed once all icons are updated. + */ + variant?: 'with-new-icon' } export const Button = (props: IButtonProps) => { const classMap = { - 'with-icon': 'u-display-flex u-align-items-center', + 'with-new-icon': 'u-display-flex u-align-items-center', } return ( From 850dd20d04448dfbad838b3403131406a8cdca0b Mon Sep 17 00:00:00 2001 From: Gaby Zifferman Date: Fri, 24 May 2024 22:20:52 +0200 Subject: [PATCH 26/26] put the label back --- src/components/general/Button/Button.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/general/Button/Button.stories.tsx b/src/components/general/Button/Button.stories.tsx index 6452aa57a..524d24629 100644 --- a/src/components/general/Button/Button.stories.tsx +++ b/src/components/general/Button/Button.stories.tsx @@ -6,7 +6,7 @@ import React from 'react' const meta: Meta = { title: 'Aquarium/General/Button', - component: props => , + component: props => , args: { block: false,