From e73622ea76be95509a6a7fe3979b0aaabea4cd48 Mon Sep 17 00:00:00 2001 From: Michal Murawski Date: Wed, 4 Feb 2026 14:16:01 +0100 Subject: [PATCH 1/2] feat(design-system): add special icons from figma [AR-41918] --- .changeset/soft-readers-like.md | 5 + cspell.json | 3 + .../components/ds-icon/custom-icons/Lego.svg | 11 ++ .../components/ds-icon/custom-icons/index.ts | 137 ++++++++++++++ .../custom-icons/special-alarm-settings.tsx | 26 +++ .../special-autoboot-profiles.tsx | 20 ++ .../custom-icons/special-automation.tsx | 20 ++ .../ds-icon/custom-icons/special-book.tsx | 21 +++ .../custom-icons/special-cached-active.tsx | 15 ++ .../custom-icons/special-cluster-ne.tsx | 34 ++++ .../ds-icon/custom-icons/special-compare.tsx | 14 ++ .../custom-icons/special-config-template.tsx | 22 +++ .../custom-icons/special-conflicted-nes.tsx | 16 ++ .../ds-icon/custom-icons/special-device.tsx | 14 ++ .../custom-icons/special-discovered-ne.tsx | 22 +++ .../custom-icons/special-fiber-circuit.tsx | 18 ++ .../special-filter-list-active.tsx | 15 ++ .../custom-icons/special-general-details.tsx | 18 ++ .../ds-icon/custom-icons/special-gnmi.tsx | 30 +++ .../custom-icons/special-grouped-devices.tsx | 22 +++ .../ds-icon/custom-icons/special-hardware.tsx | 18 ++ .../ds-icon/custom-icons/special-home.tsx | 14 ++ .../ds-icon/custom-icons/special-lego.tsx | 22 +++ .../ds-icon/custom-icons/special-map-view.tsx | 77 ++++++++ .../ds-icon/custom-icons/special-market.tsx | 18 ++ .../ds-icon/custom-icons/special-modules.tsx | 21 +++ .../custom-icons/special-ne-health.tsx | 18 ++ .../special-ne-nav-360-dashboard.tsx | 30 +++ .../special-ne-nav-components.tsx | 18 ++ .../special-ne-nav-install-log.tsx | 27 +++ .../custom-icons/special-ne-nav-logging.tsx | 20 ++ .../special-ne-nav-message-support.tsx | 27 +++ .../custom-icons/special-ne-nav-settings.tsx | 27 +++ .../custom-icons/special-ne-nav-stacks.tsx | 18 ++ .../custom-icons/special-ne-nav-terminal.tsx | 22 +++ .../custom-icons/special-ne-nav-topology.tsx | 18 ++ .../ds-icon/custom-icons/special-netgen-s.tsx | 24 +++ .../ds-icon/custom-icons/special-netgen.tsx | 24 +++ .../custom-icons/special-old-base-os.tsx | 32 ++++ .../ds-icon/custom-icons/special-packages.tsx | 22 +++ .../custom-icons/special-resources.tsx | 21 +++ .../ds-icon/custom-icons/special-scheme.tsx | 28 +++ .../custom-icons/special-site-generic.tsx | 22 +++ .../ds-icon/custom-icons/special-site-t1.tsx | 18 ++ .../ds-icon/custom-icons/special-site-t2.tsx | 18 ++ .../ds-icon/custom-icons/special-site-t3.tsx | 18 ++ .../ds-icon/custom-icons/special-site-t4.tsx | 18 ++ .../custom-icons/special-site-unknown.tsx | 26 +++ .../ds-icon/custom-icons/special-software.tsx | 14 ++ .../ds-icon/custom-icons/special-stacks.tsx | 22 +++ .../custom-icons/special-standalone.tsx | 18 ++ .../custom-icons/special-upgrading.tsx | 18 ++ .../custom-icons/special-version-control.tsx | 16 ++ .../ds-icon/custom-icons/special-webhook.tsx | 14 ++ .../special-yang-version-control.tsx | 14 ++ .../components/ds-icon/ds-icon.module.scss | 10 + .../components/ds-icon/ds-icon.stories.tsx | 172 +++++++++++++++++- .../src/components/ds-icon/ds-icon.tsx | 14 +- .../src/components/ds-icon/ds-icon.types.ts | 5 +- .../src/components/ds-icon/index.ts | 1 + 60 files changed, 1460 insertions(+), 7 deletions(-) create mode 100644 .changeset/soft-readers-like.md create mode 100644 packages/design-system/src/components/ds-icon/custom-icons/Lego.svg create mode 100644 packages/design-system/src/components/ds-icon/custom-icons/index.ts create mode 100644 packages/design-system/src/components/ds-icon/custom-icons/special-alarm-settings.tsx create mode 100644 packages/design-system/src/components/ds-icon/custom-icons/special-autoboot-profiles.tsx create mode 100644 packages/design-system/src/components/ds-icon/custom-icons/special-automation.tsx create mode 100644 packages/design-system/src/components/ds-icon/custom-icons/special-book.tsx create mode 100644 packages/design-system/src/components/ds-icon/custom-icons/special-cached-active.tsx create mode 100644 packages/design-system/src/components/ds-icon/custom-icons/special-cluster-ne.tsx create mode 100644 packages/design-system/src/components/ds-icon/custom-icons/special-compare.tsx create mode 100644 packages/design-system/src/components/ds-icon/custom-icons/special-config-template.tsx create mode 100644 packages/design-system/src/components/ds-icon/custom-icons/special-conflicted-nes.tsx create mode 100644 packages/design-system/src/components/ds-icon/custom-icons/special-device.tsx create mode 100644 packages/design-system/src/components/ds-icon/custom-icons/special-discovered-ne.tsx create mode 100644 packages/design-system/src/components/ds-icon/custom-icons/special-fiber-circuit.tsx create mode 100644 packages/design-system/src/components/ds-icon/custom-icons/special-filter-list-active.tsx create mode 100644 packages/design-system/src/components/ds-icon/custom-icons/special-general-details.tsx create mode 100644 packages/design-system/src/components/ds-icon/custom-icons/special-gnmi.tsx create mode 100644 packages/design-system/src/components/ds-icon/custom-icons/special-grouped-devices.tsx create mode 100644 packages/design-system/src/components/ds-icon/custom-icons/special-hardware.tsx create mode 100644 packages/design-system/src/components/ds-icon/custom-icons/special-home.tsx create mode 100644 packages/design-system/src/components/ds-icon/custom-icons/special-lego.tsx create mode 100644 packages/design-system/src/components/ds-icon/custom-icons/special-map-view.tsx create mode 100644 packages/design-system/src/components/ds-icon/custom-icons/special-market.tsx create mode 100644 packages/design-system/src/components/ds-icon/custom-icons/special-modules.tsx create mode 100644 packages/design-system/src/components/ds-icon/custom-icons/special-ne-health.tsx create mode 100644 packages/design-system/src/components/ds-icon/custom-icons/special-ne-nav-360-dashboard.tsx create mode 100644 packages/design-system/src/components/ds-icon/custom-icons/special-ne-nav-components.tsx create mode 100644 packages/design-system/src/components/ds-icon/custom-icons/special-ne-nav-install-log.tsx create mode 100644 packages/design-system/src/components/ds-icon/custom-icons/special-ne-nav-logging.tsx create mode 100644 packages/design-system/src/components/ds-icon/custom-icons/special-ne-nav-message-support.tsx create mode 100644 packages/design-system/src/components/ds-icon/custom-icons/special-ne-nav-settings.tsx create mode 100644 packages/design-system/src/components/ds-icon/custom-icons/special-ne-nav-stacks.tsx create mode 100644 packages/design-system/src/components/ds-icon/custom-icons/special-ne-nav-terminal.tsx create mode 100644 packages/design-system/src/components/ds-icon/custom-icons/special-ne-nav-topology.tsx create mode 100644 packages/design-system/src/components/ds-icon/custom-icons/special-netgen-s.tsx create mode 100644 packages/design-system/src/components/ds-icon/custom-icons/special-netgen.tsx create mode 100644 packages/design-system/src/components/ds-icon/custom-icons/special-old-base-os.tsx create mode 100644 packages/design-system/src/components/ds-icon/custom-icons/special-packages.tsx create mode 100644 packages/design-system/src/components/ds-icon/custom-icons/special-resources.tsx create mode 100644 packages/design-system/src/components/ds-icon/custom-icons/special-scheme.tsx create mode 100644 packages/design-system/src/components/ds-icon/custom-icons/special-site-generic.tsx create mode 100644 packages/design-system/src/components/ds-icon/custom-icons/special-site-t1.tsx create mode 100644 packages/design-system/src/components/ds-icon/custom-icons/special-site-t2.tsx create mode 100644 packages/design-system/src/components/ds-icon/custom-icons/special-site-t3.tsx create mode 100644 packages/design-system/src/components/ds-icon/custom-icons/special-site-t4.tsx create mode 100644 packages/design-system/src/components/ds-icon/custom-icons/special-site-unknown.tsx create mode 100644 packages/design-system/src/components/ds-icon/custom-icons/special-software.tsx create mode 100644 packages/design-system/src/components/ds-icon/custom-icons/special-stacks.tsx create mode 100644 packages/design-system/src/components/ds-icon/custom-icons/special-standalone.tsx create mode 100644 packages/design-system/src/components/ds-icon/custom-icons/special-upgrading.tsx create mode 100644 packages/design-system/src/components/ds-icon/custom-icons/special-version-control.tsx create mode 100644 packages/design-system/src/components/ds-icon/custom-icons/special-webhook.tsx create mode 100644 packages/design-system/src/components/ds-icon/custom-icons/special-yang-version-control.tsx diff --git a/.changeset/soft-readers-like.md b/.changeset/soft-readers-like.md new file mode 100644 index 000000000..fb3611148 --- /dev/null +++ b/.changeset/soft-readers-like.md @@ -0,0 +1,5 @@ +--- +'@drivenets/design-system': patch +--- + +- Add special icons from Figma to the `DsIcon` diff --git a/cspell.json b/cspell.json index b16ee6704..4c442757f 100644 --- a/cspell.json +++ b/cspell.json @@ -4,6 +4,7 @@ "useGitignore": true, "words": [ "attw", + "autoboot", "autodocs", "borderless", "clickability", @@ -12,8 +13,10 @@ "evenodd", "findlast", "fromentries", + "gnmi", "Linsley", "matchall", + "netgen", "nolyfill", "overscan", "Oxfmt", diff --git a/packages/design-system/src/components/ds-icon/custom-icons/Lego.svg b/packages/design-system/src/components/ds-icon/custom-icons/Lego.svg new file mode 100644 index 000000000..5762b2ee2 --- /dev/null +++ b/packages/design-system/src/components/ds-icon/custom-icons/Lego.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/packages/design-system/src/components/ds-icon/custom-icons/index.ts b/packages/design-system/src/components/ds-icon/custom-icons/index.ts new file mode 100644 index 000000000..2ef545d6e --- /dev/null +++ b/packages/design-system/src/components/ds-icon/custom-icons/index.ts @@ -0,0 +1,137 @@ +import type { FC, SVGProps } from 'react'; + +// Site & Location icons +import { SpecialMarket } from './special-market'; +import { SpecialSiteT1 } from './special-site-t1'; +import { SpecialSiteT2 } from './special-site-t2'; +import { SpecialSiteT3 } from './special-site-t3'; +import { SpecialSiteT4 } from './special-site-t4'; +import { SpecialSiteUnknown } from './special-site-unknown'; +import { SpecialSiteGeneric } from './special-site-generic'; + +// NE State icons +import { SpecialDiscoveredNe } from './special-discovered-ne'; +import { SpecialUpgrading } from './special-upgrading'; +import { SpecialClusterNe } from './special-cluster-ne'; +import { SpecialStandalone } from './special-standalone'; + +// NE Navigation icons +import { SpecialNeNav360Dashboard } from './special-ne-nav-360-dashboard'; +import { SpecialNeNavComponents } from './special-ne-nav-components'; +import { SpecialNeNavTopology } from './special-ne-nav-topology'; +import { SpecialNeNavStacks } from './special-ne-nav-stacks'; +import { SpecialNeNavSettings } from './special-ne-nav-settings'; +import { SpecialNeNavMessageSupport } from './special-ne-nav-message-support'; +import { SpecialNeNavLogging } from './special-ne-nav-logging'; +import { SpecialNeNavTerminal } from './special-ne-nav-terminal'; +import { SpecialNeNavInstallLog } from './special-ne-nav-install-log'; + +// System & Config icons +import { SpecialAutobootProfiles } from './special-autoboot-profiles'; +import { SpecialAutomation } from './special-automation'; +import { SpecialStacks } from './special-stacks'; +import { SpecialPackages } from './special-packages'; +import { SpecialGnmi } from './special-gnmi'; +import { SpecialAlarmSettings } from './special-alarm-settings'; +import { SpecialNeHealth } from './special-ne-health'; +import { SpecialHardware } from './special-hardware'; +import { SpecialModules } from './special-modules'; +import { SpecialResources } from './special-resources'; +import { SpecialVersionControl } from './special-version-control'; +import { SpecialSoftware } from './special-software'; +import { SpecialConflictedNes } from './special-conflicted-nes'; +import { SpecialYangVersionControl } from './special-yang-version-control'; +import { SpecialOldBaseOs } from './special-old-base-os'; +import { SpecialGeneralDetails } from './special-general-details'; +import { SpecialConfigTemplate } from './special-config-template'; +import { SpecialCompare } from './special-compare'; +import { SpecialWebhook } from './special-webhook'; +import { SpecialMapView } from './special-map-view'; + +// Misc icons +import { SpecialHome } from './special-home'; +import { SpecialLego } from './special-lego'; +import { SpecialScheme } from './special-scheme'; +import { SpecialBook } from './special-book'; +import { SpecialDevice } from './special-device'; +import { SpecialGroupedDevices } from './special-grouped-devices'; +import { SpecialFiberCircuit } from './special-fiber-circuit'; +import { SpecialNetgen } from './special-netgen'; +import { SpecialNetgenS } from './special-netgen-s'; + +// Active state icons +import { SpecialFilterListActive } from './special-filter-list-active'; +import { SpecialCachedActive } from './special-cached-active'; + +export type CustomIconComponent = FC>; + +export const customIcons = { + // Site & Location + 'special-market': SpecialMarket, + 'special-site-t1': SpecialSiteT1, + 'special-site-t2': SpecialSiteT2, + 'special-site-t3': SpecialSiteT3, + 'special-site-t4': SpecialSiteT4, + 'special-site-unknown': SpecialSiteUnknown, + 'special-site-generic': SpecialSiteGeneric, + + // NE State + 'special-discovered-ne': SpecialDiscoveredNe, + 'special-upgrading': SpecialUpgrading, + 'special-cluster-ne': SpecialClusterNe, + 'special-standalone': SpecialStandalone, + + // NE Navigation + 'special-ne-nav-360-dashboard': SpecialNeNav360Dashboard, + 'special-ne-nav-components': SpecialNeNavComponents, + 'special-ne-nav-topology': SpecialNeNavTopology, + 'special-ne-nav-stacks': SpecialNeNavStacks, + 'special-ne-nav-settings': SpecialNeNavSettings, + 'special-ne-nav-message-support': SpecialNeNavMessageSupport, + 'special-ne-nav-logging': SpecialNeNavLogging, + 'special-ne-nav-terminal': SpecialNeNavTerminal, + 'special-ne-nav-instal-log': SpecialNeNavInstallLog, + + // System & Config + 'special-autoboot-profiles': SpecialAutobootProfiles, + 'special-automation': SpecialAutomation, + 'special-stacks': SpecialStacks, + 'special-packages': SpecialPackages, + 'special-gnmi': SpecialGnmi, + 'special-alarm-settings': SpecialAlarmSettings, + 'special-ne-health': SpecialNeHealth, + 'special-hardware': SpecialHardware, + 'special-modules': SpecialModules, + 'special-resources': SpecialResources, + 'special-version-control': SpecialVersionControl, + 'special-software': SpecialSoftware, + 'special-conflicted-nes': SpecialConflictedNes, + 'special-yang-version-control': SpecialYangVersionControl, + 'special-old-base-os': SpecialOldBaseOs, + 'special-general-details': SpecialGeneralDetails, + 'special-config-template': SpecialConfigTemplate, + 'special-compare': SpecialCompare, + 'special-webhook': SpecialWebhook, + 'special-map-view': SpecialMapView, + + // Misc + 'special-home': SpecialHome, + 'special-lego': SpecialLego, + 'special-scheme': SpecialScheme, + 'special-book': SpecialBook, + 'special-device': SpecialDevice, + 'special-grouped-devices': SpecialGroupedDevices, + 'special-fiber-circuit': SpecialFiberCircuit, + 'special-netgen': SpecialNetgen, + 'special-netgen-s': SpecialNetgenS, + + // Active state + 'special-filter-list-active': SpecialFilterListActive, + 'special-cached-active': SpecialCachedActive, +} as const satisfies Record; + +export type CustomIconName = keyof typeof customIcons; + +export const isCustomIcon = (icon: string): icon is CustomIconName => { + return icon in customIcons; +}; diff --git a/packages/design-system/src/components/ds-icon/custom-icons/special-alarm-settings.tsx b/packages/design-system/src/components/ds-icon/custom-icons/special-alarm-settings.tsx new file mode 100644 index 000000000..e06777eb2 --- /dev/null +++ b/packages/design-system/src/components/ds-icon/custom-icons/special-alarm-settings.tsx @@ -0,0 +1,26 @@ +import type { FC, SVGProps } from 'react'; + +/** + * Special Alarm Settings icon + * @figma https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp?node-id=4863:3505 + */ +export const SpecialAlarmSettings: FC> = (props) => ( + + + + + + + + + + + +); diff --git a/packages/design-system/src/components/ds-icon/custom-icons/special-autoboot-profiles.tsx b/packages/design-system/src/components/ds-icon/custom-icons/special-autoboot-profiles.tsx new file mode 100644 index 000000000..642fc86c8 --- /dev/null +++ b/packages/design-system/src/components/ds-icon/custom-icons/special-autoboot-profiles.tsx @@ -0,0 +1,20 @@ +import type { FC, SVGProps } from 'react'; + +/** + * Special Autoboot Profiles icon + * @figma https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp?node-id=4863:3438 + */ +export const SpecialAutobootProfiles: FC> = (props) => ( + + + + + +); diff --git a/packages/design-system/src/components/ds-icon/custom-icons/special-automation.tsx b/packages/design-system/src/components/ds-icon/custom-icons/special-automation.tsx new file mode 100644 index 000000000..13835aaac --- /dev/null +++ b/packages/design-system/src/components/ds-icon/custom-icons/special-automation.tsx @@ -0,0 +1,20 @@ +import type { FC, SVGProps } from 'react'; + +/** + * Special Automation icon + * @figma https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp?node-id=4863:3453 + */ +export const SpecialAutomation: FC> = (props) => ( + + + + + +); diff --git a/packages/design-system/src/components/ds-icon/custom-icons/special-book.tsx b/packages/design-system/src/components/ds-icon/custom-icons/special-book.tsx new file mode 100644 index 000000000..b6bdcf29f --- /dev/null +++ b/packages/design-system/src/components/ds-icon/custom-icons/special-book.tsx @@ -0,0 +1,21 @@ +import type { FC, SVGProps } from 'react'; + +/** + * Special Book icon + * @figma https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp?node-id=8939:1542 + */ +export const SpecialBook: FC> = (props) => ( + + + + + + + + + + +); diff --git a/packages/design-system/src/components/ds-icon/custom-icons/special-cached-active.tsx b/packages/design-system/src/components/ds-icon/custom-icons/special-cached-active.tsx new file mode 100644 index 000000000..09f861203 --- /dev/null +++ b/packages/design-system/src/components/ds-icon/custom-icons/special-cached-active.tsx @@ -0,0 +1,15 @@ +import type { FC, SVGProps } from 'react'; + +/** + * Special Cached Active icon - cached/refresh icon with active indicator dot + * @figma https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp?node-id=19480:21325 + */ +export const SpecialCachedActive: FC> = (props) => ( + + + + +); diff --git a/packages/design-system/src/components/ds-icon/custom-icons/special-cluster-ne.tsx b/packages/design-system/src/components/ds-icon/custom-icons/special-cluster-ne.tsx new file mode 100644 index 000000000..032556ecf --- /dev/null +++ b/packages/design-system/src/components/ds-icon/custom-icons/special-cluster-ne.tsx @@ -0,0 +1,34 @@ +import type { FC, SVGProps } from 'react'; + +/** + * Special Cluster NE icon - represents a cluster network element + * @figma https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp?node-id=4849:50869 + */ +export const SpecialClusterNe: FC> = (props) => ( + + + + + + + + + + + + + + +); diff --git a/packages/design-system/src/components/ds-icon/custom-icons/special-compare.tsx b/packages/design-system/src/components/ds-icon/custom-icons/special-compare.tsx new file mode 100644 index 000000000..e563bb28c --- /dev/null +++ b/packages/design-system/src/components/ds-icon/custom-icons/special-compare.tsx @@ -0,0 +1,14 @@ +import type { FC, SVGProps } from 'react'; + +/** + * Special Compare icon + * @figma https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp?node-id=5717:36795 + */ +export const SpecialCompare: FC> = (props) => ( + + + +); diff --git a/packages/design-system/src/components/ds-icon/custom-icons/special-config-template.tsx b/packages/design-system/src/components/ds-icon/custom-icons/special-config-template.tsx new file mode 100644 index 000000000..5e249cbe2 --- /dev/null +++ b/packages/design-system/src/components/ds-icon/custom-icons/special-config-template.tsx @@ -0,0 +1,22 @@ +import type { FC, SVGProps } from 'react'; + +/** + * Special Config Template icon + * @figma https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp?node-id=5663:311 + */ +export const SpecialConfigTemplate: FC> = (props) => ( + + + + + +); diff --git a/packages/design-system/src/components/ds-icon/custom-icons/special-conflicted-nes.tsx b/packages/design-system/src/components/ds-icon/custom-icons/special-conflicted-nes.tsx new file mode 100644 index 000000000..fe45df6e1 --- /dev/null +++ b/packages/design-system/src/components/ds-icon/custom-icons/special-conflicted-nes.tsx @@ -0,0 +1,16 @@ +import type { FC, SVGProps } from 'react'; + +/** + * Special Conflicted NEs icon + * @figma https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp?node-id=4863:3617 + */ +export const SpecialConflictedNes: FC> = (props) => ( + + + +); diff --git a/packages/design-system/src/components/ds-icon/custom-icons/special-device.tsx b/packages/design-system/src/components/ds-icon/custom-icons/special-device.tsx new file mode 100644 index 000000000..46764ac74 --- /dev/null +++ b/packages/design-system/src/components/ds-icon/custom-icons/special-device.tsx @@ -0,0 +1,14 @@ +import type { FC, SVGProps } from 'react'; + +/** + * Special Device icon + * @figma https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp?node-id=9112:52009 + */ +export const SpecialDevice: FC> = (props) => ( + + + +); diff --git a/packages/design-system/src/components/ds-icon/custom-icons/special-discovered-ne.tsx b/packages/design-system/src/components/ds-icon/custom-icons/special-discovered-ne.tsx new file mode 100644 index 000000000..b685d5bcd --- /dev/null +++ b/packages/design-system/src/components/ds-icon/custom-icons/special-discovered-ne.tsx @@ -0,0 +1,22 @@ +import type { FC, SVGProps } from 'react'; + +/** + * Special Discovered NE icon - represents a discovered network element + * @figma https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp?node-id=4849:50848 + */ +export const SpecialDiscoveredNe: FC> = (props) => ( + + + +); diff --git a/packages/design-system/src/components/ds-icon/custom-icons/special-fiber-circuit.tsx b/packages/design-system/src/components/ds-icon/custom-icons/special-fiber-circuit.tsx new file mode 100644 index 000000000..f02d36286 --- /dev/null +++ b/packages/design-system/src/components/ds-icon/custom-icons/special-fiber-circuit.tsx @@ -0,0 +1,18 @@ +import type { FC, SVGProps } from 'react'; + +/** + * Special Fiber Circuit icon + * @figma https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp?node-id=9209:49345 + */ +export const SpecialFiberCircuit: FC> = (props) => ( + + + + +); diff --git a/packages/design-system/src/components/ds-icon/custom-icons/special-filter-list-active.tsx b/packages/design-system/src/components/ds-icon/custom-icons/special-filter-list-active.tsx new file mode 100644 index 000000000..65731ee5f --- /dev/null +++ b/packages/design-system/src/components/ds-icon/custom-icons/special-filter-list-active.tsx @@ -0,0 +1,15 @@ +import type { FC, SVGProps } from 'react'; + +/** + * Special Filter List Active icon - filter icon with active indicator dot + * @figma https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp?node-id=15382:33229 + */ +export const SpecialFilterListActive: FC> = (props) => ( + + + + +); diff --git a/packages/design-system/src/components/ds-icon/custom-icons/special-general-details.tsx b/packages/design-system/src/components/ds-icon/custom-icons/special-general-details.tsx new file mode 100644 index 000000000..bd0e107f8 --- /dev/null +++ b/packages/design-system/src/components/ds-icon/custom-icons/special-general-details.tsx @@ -0,0 +1,18 @@ +import type { FC, SVGProps } from 'react'; + +/** + * Special General Details icon + * @figma https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp?node-id=4863:3674 + */ +export const SpecialGeneralDetails: FC> = (props) => ( + + + + +); diff --git a/packages/design-system/src/components/ds-icon/custom-icons/special-gnmi.tsx b/packages/design-system/src/components/ds-icon/custom-icons/special-gnmi.tsx new file mode 100644 index 000000000..fd62a4863 --- /dev/null +++ b/packages/design-system/src/components/ds-icon/custom-icons/special-gnmi.tsx @@ -0,0 +1,30 @@ +import type { FC, SVGProps } from 'react'; + +/** + * Special gNMI icon + * @figma https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp?node-id=4863:3477 + */ +export const SpecialGnmi: FC> = (props) => ( + + + + + + + + + + + +); diff --git a/packages/design-system/src/components/ds-icon/custom-icons/special-grouped-devices.tsx b/packages/design-system/src/components/ds-icon/custom-icons/special-grouped-devices.tsx new file mode 100644 index 000000000..215cee432 --- /dev/null +++ b/packages/design-system/src/components/ds-icon/custom-icons/special-grouped-devices.tsx @@ -0,0 +1,22 @@ +import type { FC, SVGProps } from 'react'; + +/** + * Special Grouped Devices icon + * @figma https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp?node-id=9113:52031 + */ +export const SpecialGroupedDevices: FC> = (props) => ( + + + + + +); diff --git a/packages/design-system/src/components/ds-icon/custom-icons/special-hardware.tsx b/packages/design-system/src/components/ds-icon/custom-icons/special-hardware.tsx new file mode 100644 index 000000000..1ffaa59d5 --- /dev/null +++ b/packages/design-system/src/components/ds-icon/custom-icons/special-hardware.tsx @@ -0,0 +1,18 @@ +import type { FC, SVGProps } from 'react'; + +/** + * Special Hardware icon + * @figma https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp?node-id=4863:3524 + */ +export const SpecialHardware: FC> = (props) => ( + + + + +); diff --git a/packages/design-system/src/components/ds-icon/custom-icons/special-home.tsx b/packages/design-system/src/components/ds-icon/custom-icons/special-home.tsx new file mode 100644 index 000000000..43baef21b --- /dev/null +++ b/packages/design-system/src/components/ds-icon/custom-icons/special-home.tsx @@ -0,0 +1,14 @@ +import type { FC, SVGProps } from 'react'; + +/** + * Special Home icon + * @figma https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp?node-id=8871:4151 + */ +export const SpecialHome: FC> = (props) => ( + + + +); diff --git a/packages/design-system/src/components/ds-icon/custom-icons/special-lego.tsx b/packages/design-system/src/components/ds-icon/custom-icons/special-lego.tsx new file mode 100644 index 000000000..a5a6be9d4 --- /dev/null +++ b/packages/design-system/src/components/ds-icon/custom-icons/special-lego.tsx @@ -0,0 +1,22 @@ +import type { FC, SVGProps } from 'react'; + +/** + * Special Lego icon + * @figma https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp?node-id=8897:25225 + */ +export const SpecialLego: FC> = (props) => ( + + + + + + + + + + + +); diff --git a/packages/design-system/src/components/ds-icon/custom-icons/special-map-view.tsx b/packages/design-system/src/components/ds-icon/custom-icons/special-map-view.tsx new file mode 100644 index 000000000..cbb462442 --- /dev/null +++ b/packages/design-system/src/components/ds-icon/custom-icons/special-map-view.tsx @@ -0,0 +1,77 @@ +import type { FC, SVGProps } from 'react'; + +/** + * Special Map View icon + * @figma https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp?node-id=8866:37825 + */ +export const SpecialMapView: FC> = (props) => ( + + + + + + + + + + + + + + + + + + +); diff --git a/packages/design-system/src/components/ds-icon/custom-icons/special-market.tsx b/packages/design-system/src/components/ds-icon/custom-icons/special-market.tsx new file mode 100644 index 000000000..e32778748 --- /dev/null +++ b/packages/design-system/src/components/ds-icon/custom-icons/special-market.tsx @@ -0,0 +1,18 @@ +import type { FC, SVGProps } from 'react'; + +/** + * Special Market icon - represents a market/city location + * @figma https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp?node-id=10884:32727 + */ +export const SpecialMarket: FC> = (props) => ( + + + +); diff --git a/packages/design-system/src/components/ds-icon/custom-icons/special-modules.tsx b/packages/design-system/src/components/ds-icon/custom-icons/special-modules.tsx new file mode 100644 index 000000000..14119b49c --- /dev/null +++ b/packages/design-system/src/components/ds-icon/custom-icons/special-modules.tsx @@ -0,0 +1,21 @@ +import type { FC, SVGProps } from 'react'; + +/** + * Special Modules icon + * @figma https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp?node-id=4863:3532 + */ +export const SpecialModules: FC> = (props) => ( + + + + + + + + + + +); diff --git a/packages/design-system/src/components/ds-icon/custom-icons/special-ne-health.tsx b/packages/design-system/src/components/ds-icon/custom-icons/special-ne-health.tsx new file mode 100644 index 000000000..240d1b2d2 --- /dev/null +++ b/packages/design-system/src/components/ds-icon/custom-icons/special-ne-health.tsx @@ -0,0 +1,18 @@ +import type { FC, SVGProps } from 'react'; + +/** + * Special NE Health icon + * @figma https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp?node-id=4863:3513 + */ +export const SpecialNeHealth: FC> = (props) => ( + + + + +); diff --git a/packages/design-system/src/components/ds-icon/custom-icons/special-ne-nav-360-dashboard.tsx b/packages/design-system/src/components/ds-icon/custom-icons/special-ne-nav-360-dashboard.tsx new file mode 100644 index 000000000..10732bcd9 --- /dev/null +++ b/packages/design-system/src/components/ds-icon/custom-icons/special-ne-nav-360-dashboard.tsx @@ -0,0 +1,30 @@ +import type { FC, SVGProps } from 'react'; + +/** + * Special NE Nav 360 Dashboard icon + * @figma https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp?node-id=4849:50951 + */ +export const SpecialNeNav360Dashboard: FC> = (props) => ( + + + + + + + + + + + + + + + +); diff --git a/packages/design-system/src/components/ds-icon/custom-icons/special-ne-nav-components.tsx b/packages/design-system/src/components/ds-icon/custom-icons/special-ne-nav-components.tsx new file mode 100644 index 000000000..ca5b36e5f --- /dev/null +++ b/packages/design-system/src/components/ds-icon/custom-icons/special-ne-nav-components.tsx @@ -0,0 +1,18 @@ +import type { FC, SVGProps } from 'react'; + +/** + * Special NE Nav Components icon + * @figma https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp?node-id=4849:50962 + */ +export const SpecialNeNavComponents: FC> = (props) => ( + + + +); diff --git a/packages/design-system/src/components/ds-icon/custom-icons/special-ne-nav-install-log.tsx b/packages/design-system/src/components/ds-icon/custom-icons/special-ne-nav-install-log.tsx new file mode 100644 index 000000000..d92284c6e --- /dev/null +++ b/packages/design-system/src/components/ds-icon/custom-icons/special-ne-nav-install-log.tsx @@ -0,0 +1,27 @@ +import type { FC, SVGProps } from 'react'; + +/** + * Special NE Nav Installation Log icon + * @figma https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp?node-id=4863:3439 + */ +export const SpecialNeNavInstallLog: FC> = (props) => ( + + + + +); diff --git a/packages/design-system/src/components/ds-icon/custom-icons/special-ne-nav-logging.tsx b/packages/design-system/src/components/ds-icon/custom-icons/special-ne-nav-logging.tsx new file mode 100644 index 000000000..ae2edcd44 --- /dev/null +++ b/packages/design-system/src/components/ds-icon/custom-icons/special-ne-nav-logging.tsx @@ -0,0 +1,20 @@ +import type { FC, SVGProps } from 'react'; + +/** + * Special NE Nav Logging icon + * @figma https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp?node-id=4849:51001 + */ +export const SpecialNeNavLogging: FC> = (props) => ( + + + + + +); diff --git a/packages/design-system/src/components/ds-icon/custom-icons/special-ne-nav-message-support.tsx b/packages/design-system/src/components/ds-icon/custom-icons/special-ne-nav-message-support.tsx new file mode 100644 index 000000000..9f06b2132 --- /dev/null +++ b/packages/design-system/src/components/ds-icon/custom-icons/special-ne-nav-message-support.tsx @@ -0,0 +1,27 @@ +import type { FC, SVGProps } from 'react'; + +/** + * Special NE Nav Message Support icon + * @figma https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp?node-id=4849:50991 + */ +export const SpecialNeNavMessageSupport: FC> = (props) => ( + + + + + + + + + + + + +); diff --git a/packages/design-system/src/components/ds-icon/custom-icons/special-ne-nav-settings.tsx b/packages/design-system/src/components/ds-icon/custom-icons/special-ne-nav-settings.tsx new file mode 100644 index 000000000..617ed7e6b --- /dev/null +++ b/packages/design-system/src/components/ds-icon/custom-icons/special-ne-nav-settings.tsx @@ -0,0 +1,27 @@ +import type { FC, SVGProps } from 'react'; + +/** + * Special NE Nav Settings icon + * @figma https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp?node-id=4849:50982 + */ +export const SpecialNeNavSettings: FC> = (props) => ( + + + + +); diff --git a/packages/design-system/src/components/ds-icon/custom-icons/special-ne-nav-stacks.tsx b/packages/design-system/src/components/ds-icon/custom-icons/special-ne-nav-stacks.tsx new file mode 100644 index 000000000..8233df11f --- /dev/null +++ b/packages/design-system/src/components/ds-icon/custom-icons/special-ne-nav-stacks.tsx @@ -0,0 +1,18 @@ +import type { FC, SVGProps } from 'react'; + +/** + * Special NE Nav Stacks icon + * @figma https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp?node-id=4849:50974 + */ +export const SpecialNeNavStacks: FC> = (props) => ( + + + +); diff --git a/packages/design-system/src/components/ds-icon/custom-icons/special-ne-nav-terminal.tsx b/packages/design-system/src/components/ds-icon/custom-icons/special-ne-nav-terminal.tsx new file mode 100644 index 000000000..f266eb26a --- /dev/null +++ b/packages/design-system/src/components/ds-icon/custom-icons/special-ne-nav-terminal.tsx @@ -0,0 +1,22 @@ +import type { FC, SVGProps } from 'react'; + +/** + * Special NE Nav Terminal icon + * @figma https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp?node-id=4849:51009 + */ +export const SpecialNeNavTerminal: FC> = (props) => ( + + + +); diff --git a/packages/design-system/src/components/ds-icon/custom-icons/special-ne-nav-topology.tsx b/packages/design-system/src/components/ds-icon/custom-icons/special-ne-nav-topology.tsx new file mode 100644 index 000000000..6d3494538 --- /dev/null +++ b/packages/design-system/src/components/ds-icon/custom-icons/special-ne-nav-topology.tsx @@ -0,0 +1,18 @@ +import type { FC, SVGProps } from 'react'; + +/** + * Special NE Nav Topology icon + * @figma https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp?node-id=4849:50968 + */ +export const SpecialNeNavTopology: FC> = (props) => ( + + + +); diff --git a/packages/design-system/src/components/ds-icon/custom-icons/special-netgen-s.tsx b/packages/design-system/src/components/ds-icon/custom-icons/special-netgen-s.tsx new file mode 100644 index 000000000..0aa863185 --- /dev/null +++ b/packages/design-system/src/components/ds-icon/custom-icons/special-netgen-s.tsx @@ -0,0 +1,24 @@ +import type { FC, SVGProps } from 'react'; + +/** + * Special NetGen-S icon + * @figma https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp?node-id=10635:3838 + */ +export const SpecialNetgenS: FC> = (props) => ( + + + + + +); diff --git a/packages/design-system/src/components/ds-icon/custom-icons/special-netgen.tsx b/packages/design-system/src/components/ds-icon/custom-icons/special-netgen.tsx new file mode 100644 index 000000000..d9c97543e --- /dev/null +++ b/packages/design-system/src/components/ds-icon/custom-icons/special-netgen.tsx @@ -0,0 +1,24 @@ +import type { FC, SVGProps } from 'react'; + +/** + * Special NetGen icon + * @figma https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp?node-id=9899:43504 + */ +export const SpecialNetgen: FC> = (props) => ( + + + + + +); diff --git a/packages/design-system/src/components/ds-icon/custom-icons/special-old-base-os.tsx b/packages/design-system/src/components/ds-icon/custom-icons/special-old-base-os.tsx new file mode 100644 index 000000000..01dcc4d80 --- /dev/null +++ b/packages/design-system/src/components/ds-icon/custom-icons/special-old-base-os.tsx @@ -0,0 +1,32 @@ +import type { FC, SVGProps } from 'react'; + +/** + * Special Old BaseOS icon + * @figma https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp?node-id=4863:3659 + */ +export const SpecialOldBaseOs: FC> = (props) => ( + + + + + + + + + + + + +); diff --git a/packages/design-system/src/components/ds-icon/custom-icons/special-packages.tsx b/packages/design-system/src/components/ds-icon/custom-icons/special-packages.tsx new file mode 100644 index 000000000..e32056f57 --- /dev/null +++ b/packages/design-system/src/components/ds-icon/custom-icons/special-packages.tsx @@ -0,0 +1,22 @@ +import type { FC, SVGProps } from 'react'; + +/** + * Special Packages icon + * @figma https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp?node-id=4863:3469 + */ +export const SpecialPackages: FC> = (props) => ( + + + +); diff --git a/packages/design-system/src/components/ds-icon/custom-icons/special-resources.tsx b/packages/design-system/src/components/ds-icon/custom-icons/special-resources.tsx new file mode 100644 index 000000000..361dd1410 --- /dev/null +++ b/packages/design-system/src/components/ds-icon/custom-icons/special-resources.tsx @@ -0,0 +1,21 @@ +import type { FC, SVGProps } from 'react'; + +/** + * Special Resources icon + * @figma https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp?node-id=4863:3553 + */ +export const SpecialResources: FC> = (props) => ( + + + + + + + + + + +); diff --git a/packages/design-system/src/components/ds-icon/custom-icons/special-scheme.tsx b/packages/design-system/src/components/ds-icon/custom-icons/special-scheme.tsx new file mode 100644 index 000000000..d700645d5 --- /dev/null +++ b/packages/design-system/src/components/ds-icon/custom-icons/special-scheme.tsx @@ -0,0 +1,28 @@ +import type { FC, SVGProps } from 'react'; + +/** + * Special Scheme icon + * @figma https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp?node-id=8938:1438 + */ +export const SpecialScheme: FC> = (props) => ( + + + + + +); diff --git a/packages/design-system/src/components/ds-icon/custom-icons/special-site-generic.tsx b/packages/design-system/src/components/ds-icon/custom-icons/special-site-generic.tsx new file mode 100644 index 000000000..e9ee02c43 --- /dev/null +++ b/packages/design-system/src/components/ds-icon/custom-icons/special-site-generic.tsx @@ -0,0 +1,22 @@ +import type { FC, SVGProps } from 'react'; + +/** + * Special Site Generic icon - represents a generic site + * @figma https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp?node-id=10886:32782 + */ +export const SpecialSiteGeneric: FC> = (props) => ( + + + + + + + +); diff --git a/packages/design-system/src/components/ds-icon/custom-icons/special-site-t1.tsx b/packages/design-system/src/components/ds-icon/custom-icons/special-site-t1.tsx new file mode 100644 index 000000000..4ac9615f5 --- /dev/null +++ b/packages/design-system/src/components/ds-icon/custom-icons/special-site-t1.tsx @@ -0,0 +1,18 @@ +import type { FC, SVGProps } from 'react'; + +/** + * Special Site T1 icon - represents a Tier 1 site + * @figma https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp?node-id=10886:32739 + */ +export const SpecialSiteT1: FC> = (props) => ( + + + +); diff --git a/packages/design-system/src/components/ds-icon/custom-icons/special-site-t2.tsx b/packages/design-system/src/components/ds-icon/custom-icons/special-site-t2.tsx new file mode 100644 index 000000000..e77e72cb8 --- /dev/null +++ b/packages/design-system/src/components/ds-icon/custom-icons/special-site-t2.tsx @@ -0,0 +1,18 @@ +import type { FC, SVGProps } from 'react'; + +/** + * Special Site T2 icon - represents a Tier 2 site + * @figma https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp?node-id=10886:32783 + */ +export const SpecialSiteT2: FC> = (props) => ( + + + +); diff --git a/packages/design-system/src/components/ds-icon/custom-icons/special-site-t3.tsx b/packages/design-system/src/components/ds-icon/custom-icons/special-site-t3.tsx new file mode 100644 index 000000000..9e4750046 --- /dev/null +++ b/packages/design-system/src/components/ds-icon/custom-icons/special-site-t3.tsx @@ -0,0 +1,18 @@ +import type { FC, SVGProps } from 'react'; + +/** + * Special Site T3 icon - represents a Tier 3 site + * @figma https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp?node-id=10886:32784 + */ +export const SpecialSiteT3: FC> = (props) => ( + + + +); diff --git a/packages/design-system/src/components/ds-icon/custom-icons/special-site-t4.tsx b/packages/design-system/src/components/ds-icon/custom-icons/special-site-t4.tsx new file mode 100644 index 000000000..c7e1c1fd2 --- /dev/null +++ b/packages/design-system/src/components/ds-icon/custom-icons/special-site-t4.tsx @@ -0,0 +1,18 @@ +import type { FC, SVGProps } from 'react'; + +/** + * Special Site T4 icon - represents a Tier 4 site + * @figma https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp?node-id=10884:32697 + */ +export const SpecialSiteT4: FC> = (props) => ( + + + +); diff --git a/packages/design-system/src/components/ds-icon/custom-icons/special-site-unknown.tsx b/packages/design-system/src/components/ds-icon/custom-icons/special-site-unknown.tsx new file mode 100644 index 000000000..6132fb6bc --- /dev/null +++ b/packages/design-system/src/components/ds-icon/custom-icons/special-site-unknown.tsx @@ -0,0 +1,26 @@ +import type { FC, SVGProps } from 'react'; + +/** + * Special Site Unknown icon - represents an unknown site type + * @figma https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp?node-id=10884:32698 + */ +export const SpecialSiteUnknown: FC> = (props) => ( + + + + + + + +); diff --git a/packages/design-system/src/components/ds-icon/custom-icons/special-software.tsx b/packages/design-system/src/components/ds-icon/custom-icons/special-software.tsx new file mode 100644 index 000000000..c6b02900e --- /dev/null +++ b/packages/design-system/src/components/ds-icon/custom-icons/special-software.tsx @@ -0,0 +1,14 @@ +import type { FC, SVGProps } from 'react'; + +/** + * Special Software icon + * @figma https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp?node-id=4863:3603 + */ +export const SpecialSoftware: FC> = (props) => ( + + + +); diff --git a/packages/design-system/src/components/ds-icon/custom-icons/special-stacks.tsx b/packages/design-system/src/components/ds-icon/custom-icons/special-stacks.tsx new file mode 100644 index 000000000..1d081f43f --- /dev/null +++ b/packages/design-system/src/components/ds-icon/custom-icons/special-stacks.tsx @@ -0,0 +1,22 @@ +import type { FC, SVGProps } from 'react'; + +/** + * Special Stacks icon + * @figma https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp?node-id=4863:3463 + */ +export const SpecialStacks: FC> = (props) => ( + + + +); diff --git a/packages/design-system/src/components/ds-icon/custom-icons/special-standalone.tsx b/packages/design-system/src/components/ds-icon/custom-icons/special-standalone.tsx new file mode 100644 index 000000000..03547b42c --- /dev/null +++ b/packages/design-system/src/components/ds-icon/custom-icons/special-standalone.tsx @@ -0,0 +1,18 @@ +import type { FC, SVGProps } from 'react'; + +/** + * Special Standalone icon - represents a standalone network element + * @figma https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp?node-id=4849:50932 + */ +export const SpecialStandalone: FC> = (props) => ( + + + +); diff --git a/packages/design-system/src/components/ds-icon/custom-icons/special-upgrading.tsx b/packages/design-system/src/components/ds-icon/custom-icons/special-upgrading.tsx new file mode 100644 index 000000000..6b1d01de1 --- /dev/null +++ b/packages/design-system/src/components/ds-icon/custom-icons/special-upgrading.tsx @@ -0,0 +1,18 @@ +import type { FC, SVGProps } from 'react'; + +/** + * Special Upgrading icon - represents an upgrading state + * @figma https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp?node-id=4849:50884 + */ +export const SpecialUpgrading: FC> = (props) => ( + + + +); diff --git a/packages/design-system/src/components/ds-icon/custom-icons/special-version-control.tsx b/packages/design-system/src/components/ds-icon/custom-icons/special-version-control.tsx new file mode 100644 index 000000000..61a421217 --- /dev/null +++ b/packages/design-system/src/components/ds-icon/custom-icons/special-version-control.tsx @@ -0,0 +1,16 @@ +import type { FC, SVGProps } from 'react'; + +/** + * Special Version Control icon + * @figma https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp?node-id=4863:3589 + */ +export const SpecialVersionControl: FC> = (props) => ( + + + +); diff --git a/packages/design-system/src/components/ds-icon/custom-icons/special-webhook.tsx b/packages/design-system/src/components/ds-icon/custom-icons/special-webhook.tsx new file mode 100644 index 000000000..ce950e287 --- /dev/null +++ b/packages/design-system/src/components/ds-icon/custom-icons/special-webhook.tsx @@ -0,0 +1,14 @@ +import type { FC, SVGProps } from 'react'; + +/** + * Special Webhook icon + * @figma https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp?node-id=6873:11757 + */ +export const SpecialWebhook: FC> = (props) => ( + + + +); diff --git a/packages/design-system/src/components/ds-icon/custom-icons/special-yang-version-control.tsx b/packages/design-system/src/components/ds-icon/custom-icons/special-yang-version-control.tsx new file mode 100644 index 000000000..30610dcbd --- /dev/null +++ b/packages/design-system/src/components/ds-icon/custom-icons/special-yang-version-control.tsx @@ -0,0 +1,14 @@ +import type { FC, SVGProps } from 'react'; + +/** + * Special Yang Version Control icon + * @figma https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp?node-id=4863:3682 + */ +export const SpecialYangVersionControl: FC> = (props) => ( + + + +); diff --git a/packages/design-system/src/components/ds-icon/ds-icon.module.scss b/packages/design-system/src/components/ds-icon/ds-icon.module.scss index d4d33c8d5..583697085 100644 --- a/packages/design-system/src/components/ds-icon/ds-icon.module.scss +++ b/packages/design-system/src/components/ds-icon/ds-icon.module.scss @@ -1,22 +1,32 @@ .icon { &.extra-large { font-size: var(--icon-width-extra-large); + width: var(--icon-width-extra-large); + height: var(--icon-width-extra-large); } &.large { font-size: var(--icon-width-large); + width: var(--icon-width-large); + height: var(--icon-width-large); } &.medium { font-size: var(--icon-width-medium); + width: var(--icon-width-medium); + height: var(--icon-width-medium); } &.small { font-size: var(--icon-width-small); + width: var(--icon-width-small); + height: var(--icon-width-small); } &.tiny { font-size: var(--icon-width-tiny); + width: var(--icon-width-tiny); + height: var(--icon-width-tiny); } } diff --git a/packages/design-system/src/components/ds-icon/ds-icon.stories.tsx b/packages/design-system/src/components/ds-icon/ds-icon.stories.tsx index af0460160..771d680b5 100644 --- a/packages/design-system/src/components/ds-icon/ds-icon.stories.tsx +++ b/packages/design-system/src/components/ds-icon/ds-icon.stories.tsx @@ -4,6 +4,7 @@ import DsIcon from './ds-icon'; import './ds-icon.stories.scss'; import { materialIcons } from './material-icons'; import { iconSizes, iconVariants, type IconName } from './ds-icon.types'; +import { customIcons, type CustomIconName } from './custom-icons'; const meta: Meta = { title: 'Design System/Icon', @@ -47,11 +48,18 @@ export const Default: Story = { export const Colored: Story = { args: { - icon: 'check_circle', size: 'medium', filled: true, style: { color: '#4CAF50' }, }, + render: function Render(args) { + return ( +
+ + +
+ ); + }, }; interface IconsByCategory { @@ -63,14 +71,19 @@ const ICONS_URL = 'https://raw.githubusercontent.com/google/material-design-icons/master/update/current_versions.json'; export const Showcase: Story = { + args: { + size: 'medium', + variant: 'outlined', + filled: false, + }, parameters: { layout: 'fullscreen', }, - render: function Render() { + render: function Render(args) { + const { size, variant, filled } = args; const [searchTerm, setSearchTerm] = useState(''); const [iconsByCategory, setIconsByCategory] = useState({}); const [isLoading, setIsLoading] = useState(true); - // const [error, setError] = useState(null); const [usedFallback, setUsedFallback] = useState(false); // Process icon data into categories @@ -211,7 +224,7 @@ export const Showcase: Story = { onClick={() => handleIconClick(iconName)} title={`Click to copy: ${iconName}`} > - + {iconName} ))} @@ -223,3 +236,154 @@ export const Showcase: Story = { ); }, }; + +// Group custom icons by category for display +const customIconCategories: Record = { + 'Site & Location': [ + 'special-market', + 'special-site-t1', + 'special-site-t2', + 'special-site-t3', + 'special-site-t4', + 'special-site-unknown', + 'special-site-generic', + ], + 'NE State': ['special-discovered-ne', 'special-upgrading', 'special-cluster-ne', 'special-standalone'], + 'NE Navigation': [ + 'special-ne-nav-360-dashboard', + 'special-ne-nav-components', + 'special-ne-nav-topology', + 'special-ne-nav-stacks', + 'special-ne-nav-settings', + 'special-ne-nav-message-support', + 'special-ne-nav-logging', + 'special-ne-nav-terminal', + 'special-ne-nav-instal-log', + ], + 'System & Config': [ + 'special-autoboot-profiles', + 'special-automation', + 'special-stacks', + 'special-packages', + 'special-gnmi', + 'special-alarm-settings', + 'special-ne-health', + 'special-hardware', + 'special-modules', + 'special-resources', + 'special-version-control', + 'special-software', + 'special-conflicted-nes', + 'special-yang-version-control', + 'special-old-base-os', + 'special-general-details', + 'special-config-template', + 'special-compare', + 'special-webhook', + 'special-map-view', + ], + Misc: [ + 'special-home', + 'special-lego', + 'special-scheme', + 'special-book', + 'special-device', + 'special-grouped-devices', + 'special-fiber-circuit', + 'special-netgen', + 'special-netgen-s', + ], + 'Active State': ['special-filter-list-active', 'special-cached-active'], +}; + +export const CustomIcons: Story = { + args: { + size: 'medium', + }, + parameters: { + layout: 'fullscreen', + }, + render: function Render(args) { + const { size } = args; + const [searchTerm, setSearchTerm] = useState(''); + + const filteredCategories = useMemo(() => { + const result: Record = {}; + + Object.entries(customIconCategories).forEach(([category, icons]) => { + const filteredIcons = icons.filter( + (icon) => + icon.toLowerCase().includes(searchTerm.toLowerCase()) || + category.toLowerCase().includes(searchTerm.toLowerCase()), + ); + + if (filteredIcons.length > 0) { + result[category] = filteredIcons; + } + }); + + return result; + }, [searchTerm]); + + const handleIconClick = async (iconName: string) => { + await navigator.clipboard.writeText(iconName); + + const notification = document.createElement('div'); + notification.className = 'copy-notification'; + notification.textContent = `Copied: ${iconName}`; + document.body.appendChild(notification); + + setTimeout(() => { + document.body.removeChild(notification); + }, 2000); + }; + + const totalIcons = Object.keys(customIcons).length; + + return ( +
+
+ setSearchTerm(e.target.value)} + /> +
+ {Object.values(filteredCategories).reduce((total, icons) => total + icons.length, 0)} of{' '} + {totalIcons} custom icons +
+
+ +
+ These are custom DriveNets-specific icons. Use the "special-" prefix to distinguish them + from Material Icons. +
+ + {Object.keys(filteredCategories).length === 0 ? ( +
No icons found matching "{searchTerm}"
+ ) : ( + Object.entries(filteredCategories).map(([category, icons]) => ( +
+

{category}

+
+ {icons.map((iconName) => ( + + ))} +
+
+ )) + )} +
+ ); + }, +}; diff --git a/packages/design-system/src/components/ds-icon/ds-icon.tsx b/packages/design-system/src/components/ds-icon/ds-icon.tsx index 78003bcba..481f9d773 100644 --- a/packages/design-system/src/components/ds-icon/ds-icon.tsx +++ b/packages/design-system/src/components/ds-icon/ds-icon.tsx @@ -2,9 +2,10 @@ import type React from 'react'; import classNames from 'classnames'; import styles from './ds-icon.module.scss'; import type { DsIconProps } from './ds-icon.types'; +import { customIcons, isCustomIcon } from './custom-icons'; /** - * Design system Icon component that renders Google Material Icons or inline SVGs + * Design system Icon component that renders Google Material Icons, custom SVG icons, or inline SVGs */ const DsIcon: React.FC = ({ icon, @@ -15,14 +16,23 @@ const DsIcon: React.FC = ({ style = {}, ...rest }) => { - const variantClass = `material-symbols-${variant}`; const iconClass = classNames(styles.icon, styles[size], { [styles.filled]: filled }, className); + // 1. SVG component passed directly if (typeof icon === 'function') { const SvgComponent = icon; return ; } + // 2. Custom registered icon from custom-icons registry + if (isCustomIcon(icon)) { + const SvgComponent = customIcons[icon]; + return ; + } + + // 3. Material Icon (font-based) + const variantClass = `material-symbols-${variant}`; + return ( {icon} diff --git a/packages/design-system/src/components/ds-icon/ds-icon.types.ts b/packages/design-system/src/components/ds-icon/ds-icon.types.ts index abb4f2ab2..0470f4aa4 100644 --- a/packages/design-system/src/components/ds-icon/ds-icon.types.ts +++ b/packages/design-system/src/components/ds-icon/ds-icon.types.ts @@ -1,15 +1,18 @@ import type React from 'react'; import type { IconPrefix, materialIcons } from './material-icons'; +import type { CustomIconName } from './custom-icons'; export const iconSizes = ['tiny', 'small', 'medium', 'large', 'extra-large'] as const; export type IconSize = (typeof iconSizes)[number]; export const iconVariants = ['outlined', 'rounded'] as const; export type IconVariant = (typeof iconVariants)[number]; -export type IconName = { +export type MaterialIconName = { [K in keyof typeof materialIcons]: K extends `${IconPrefix}::${infer Name}` ? Name : never; }[keyof typeof materialIcons]; +export type IconName = MaterialIconName | CustomIconName; + export type IconType = IconName | React.FunctionComponent>; export interface DsIconProps { diff --git a/packages/design-system/src/components/ds-icon/index.ts b/packages/design-system/src/components/ds-icon/index.ts index f281ea69c..70c2a09db 100644 --- a/packages/design-system/src/components/ds-icon/index.ts +++ b/packages/design-system/src/components/ds-icon/index.ts @@ -1,2 +1,3 @@ export { default as DsIcon } from './ds-icon'; export * from './ds-icon.types'; +export { customIcons, isCustomIcon, type CustomIconName, type CustomIconComponent } from './custom-icons'; From eaebfe1c616855f31e45476a93d94019c5ee0f04 Mon Sep 17 00:00:00 2001 From: Michal Murawski Date: Mon, 9 Feb 2026 09:14:50 +0100 Subject: [PATCH 2/2] feat(design-system): CR changes v1 [AR-41918] --- .../custom-icons/special-alarm-settings.tsx | 46 +++--- .../ds-icon/custom-icons/special-book.tsx | 36 +++-- .../custom-icons/special-cluster-ne.tsx | 62 ++++---- .../ds-icon/custom-icons/special-gnmi.tsx | 54 ++++--- .../ds-icon/custom-icons/special-lego.tsx | 38 +++-- .../ds-icon/custom-icons/special-map-view.tsx | 148 +++++++++--------- .../ds-icon/custom-icons/special-modules.tsx | 36 +++-- .../special-ne-nav-360-dashboard.tsx | 54 ++++--- .../special-ne-nav-message-support.tsx | 48 +++--- .../custom-icons/special-old-base-os.tsx | 58 +++---- .../custom-icons/special-resources.tsx | 36 +++-- 11 files changed, 330 insertions(+), 286 deletions(-) diff --git a/packages/design-system/src/components/ds-icon/custom-icons/special-alarm-settings.tsx b/packages/design-system/src/components/ds-icon/custom-icons/special-alarm-settings.tsx index e06777eb2..da14dd7d5 100644 --- a/packages/design-system/src/components/ds-icon/custom-icons/special-alarm-settings.tsx +++ b/packages/design-system/src/components/ds-icon/custom-icons/special-alarm-settings.tsx @@ -1,26 +1,30 @@ -import type { FC, SVGProps } from 'react'; +import { useId, type FC, type SVGProps } from 'react'; /** * Special Alarm Settings icon * @figma https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp?node-id=4863:3505 */ -export const SpecialAlarmSettings: FC> = (props) => ( - - - - - - - - - - - -); +export const SpecialAlarmSettings: FC> = (props) => { + const clipId = useId(); + + return ( + + + + + + + + + + + + ); +}; diff --git a/packages/design-system/src/components/ds-icon/custom-icons/special-book.tsx b/packages/design-system/src/components/ds-icon/custom-icons/special-book.tsx index b6bdcf29f..b4fd4566a 100644 --- a/packages/design-system/src/components/ds-icon/custom-icons/special-book.tsx +++ b/packages/design-system/src/components/ds-icon/custom-icons/special-book.tsx @@ -1,21 +1,25 @@ -import type { FC, SVGProps } from 'react'; +import { useId, type FC, type SVGProps } from 'react'; /** * Special Book icon * @figma https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp?node-id=8939:1542 */ -export const SpecialBook: FC> = (props) => ( - - - - - - - - - - -); +export const SpecialBook: FC> = (props) => { + const clipId = useId(); + + return ( + + + + + + + + + + + ); +}; diff --git a/packages/design-system/src/components/ds-icon/custom-icons/special-cluster-ne.tsx b/packages/design-system/src/components/ds-icon/custom-icons/special-cluster-ne.tsx index 032556ecf..1379453f3 100644 --- a/packages/design-system/src/components/ds-icon/custom-icons/special-cluster-ne.tsx +++ b/packages/design-system/src/components/ds-icon/custom-icons/special-cluster-ne.tsx @@ -1,34 +1,38 @@ -import type { FC, SVGProps } from 'react'; +import { useId, type FC, type SVGProps } from 'react'; /** * Special Cluster NE icon - represents a cluster network element * @figma https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp?node-id=4849:50869 */ -export const SpecialClusterNe: FC> = (props) => ( - - - - - - - - - - - - - - -); +export const SpecialClusterNe: FC> = (props) => { + const clipId = useId(); + + return ( + + + + + + + + + + + + + + + ); +}; diff --git a/packages/design-system/src/components/ds-icon/custom-icons/special-gnmi.tsx b/packages/design-system/src/components/ds-icon/custom-icons/special-gnmi.tsx index fd62a4863..f770140ad 100644 --- a/packages/design-system/src/components/ds-icon/custom-icons/special-gnmi.tsx +++ b/packages/design-system/src/components/ds-icon/custom-icons/special-gnmi.tsx @@ -1,30 +1,34 @@ -import type { FC, SVGProps } from 'react'; +import { useId, type FC, type SVGProps } from 'react'; /** * Special gNMI icon * @figma https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp?node-id=4863:3477 */ -export const SpecialGnmi: FC> = (props) => ( - - - - - - - - - - - -); +export const SpecialGnmi: FC> = (props) => { + const clipId = useId(); + + return ( + + + + + + + + + + + + ); +}; diff --git a/packages/design-system/src/components/ds-icon/custom-icons/special-lego.tsx b/packages/design-system/src/components/ds-icon/custom-icons/special-lego.tsx index a5a6be9d4..b95c37bdc 100644 --- a/packages/design-system/src/components/ds-icon/custom-icons/special-lego.tsx +++ b/packages/design-system/src/components/ds-icon/custom-icons/special-lego.tsx @@ -1,22 +1,26 @@ -import type { FC, SVGProps } from 'react'; +import { useId, type FC, type SVGProps } from 'react'; /** * Special Lego icon * @figma https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp?node-id=8897:25225 */ -export const SpecialLego: FC> = (props) => ( - - - - - - - - - - - -); +export const SpecialLego: FC> = (props) => { + const clipId = useId(); + + return ( + + + + + + + + + + + + ); +}; diff --git a/packages/design-system/src/components/ds-icon/custom-icons/special-map-view.tsx b/packages/design-system/src/components/ds-icon/custom-icons/special-map-view.tsx index cbb462442..bd978eb23 100644 --- a/packages/design-system/src/components/ds-icon/custom-icons/special-map-view.tsx +++ b/packages/design-system/src/components/ds-icon/custom-icons/special-map-view.tsx @@ -1,77 +1,81 @@ -import type { FC, SVGProps } from 'react'; +import { useId, type FC, type SVGProps } from 'react'; /** * Special Map View icon * @figma https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp?node-id=8866:37825 */ -export const SpecialMapView: FC> = (props) => ( - - - - - - - - - - - - - - - - - - -); +export const SpecialMapView: FC> = (props) => { + const clipId = useId(); + + return ( + + + + + + + + + + + + + + + + + + + ); +}; diff --git a/packages/design-system/src/components/ds-icon/custom-icons/special-modules.tsx b/packages/design-system/src/components/ds-icon/custom-icons/special-modules.tsx index 14119b49c..3f815c034 100644 --- a/packages/design-system/src/components/ds-icon/custom-icons/special-modules.tsx +++ b/packages/design-system/src/components/ds-icon/custom-icons/special-modules.tsx @@ -1,21 +1,25 @@ -import type { FC, SVGProps } from 'react'; +import { useId, type FC, type SVGProps } from 'react'; /** * Special Modules icon * @figma https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp?node-id=4863:3532 */ -export const SpecialModules: FC> = (props) => ( - - - - - - - - - - -); +export const SpecialModules: FC> = (props) => { + const clipId = useId(); + + return ( + + + + + + + + + + + ); +}; diff --git a/packages/design-system/src/components/ds-icon/custom-icons/special-ne-nav-360-dashboard.tsx b/packages/design-system/src/components/ds-icon/custom-icons/special-ne-nav-360-dashboard.tsx index 10732bcd9..a15099c70 100644 --- a/packages/design-system/src/components/ds-icon/custom-icons/special-ne-nav-360-dashboard.tsx +++ b/packages/design-system/src/components/ds-icon/custom-icons/special-ne-nav-360-dashboard.tsx @@ -1,30 +1,34 @@ -import type { FC, SVGProps } from 'react'; +import { useId, type FC, type SVGProps } from 'react'; /** * Special NE Nav 360 Dashboard icon * @figma https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp?node-id=4849:50951 */ -export const SpecialNeNav360Dashboard: FC> = (props) => ( - - - - - - - - - - - - - - - -); +export const SpecialNeNav360Dashboard: FC> = (props) => { + const clipId = useId(); + + return ( + + + + + + + + + + + + + + + + ); +}; diff --git a/packages/design-system/src/components/ds-icon/custom-icons/special-ne-nav-message-support.tsx b/packages/design-system/src/components/ds-icon/custom-icons/special-ne-nav-message-support.tsx index 9f06b2132..08d60d280 100644 --- a/packages/design-system/src/components/ds-icon/custom-icons/special-ne-nav-message-support.tsx +++ b/packages/design-system/src/components/ds-icon/custom-icons/special-ne-nav-message-support.tsx @@ -1,27 +1,31 @@ -import type { FC, SVGProps } from 'react'; +import { useId, type FC, type SVGProps } from 'react'; /** * Special NE Nav Message Support icon * @figma https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp?node-id=4849:50991 */ -export const SpecialNeNavMessageSupport: FC> = (props) => ( - - - - - - - - - - - - -); +export const SpecialNeNavMessageSupport: FC> = (props) => { + const clipId = useId(); + + return ( + + + + + + + + + + + + + ); +}; diff --git a/packages/design-system/src/components/ds-icon/custom-icons/special-old-base-os.tsx b/packages/design-system/src/components/ds-icon/custom-icons/special-old-base-os.tsx index 01dcc4d80..f8ac685f8 100644 --- a/packages/design-system/src/components/ds-icon/custom-icons/special-old-base-os.tsx +++ b/packages/design-system/src/components/ds-icon/custom-icons/special-old-base-os.tsx @@ -1,32 +1,36 @@ -import type { FC, SVGProps } from 'react'; +import { useId, type FC, type SVGProps } from 'react'; /** * Special Old BaseOS icon * @figma https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp?node-id=4863:3659 */ -export const SpecialOldBaseOs: FC> = (props) => ( - - - - - - - - - - - - -); +export const SpecialOldBaseOs: FC> = (props) => { + const clipId = useId(); + + return ( + + + + + + + + + + + + + ); +}; diff --git a/packages/design-system/src/components/ds-icon/custom-icons/special-resources.tsx b/packages/design-system/src/components/ds-icon/custom-icons/special-resources.tsx index 361dd1410..799754883 100644 --- a/packages/design-system/src/components/ds-icon/custom-icons/special-resources.tsx +++ b/packages/design-system/src/components/ds-icon/custom-icons/special-resources.tsx @@ -1,21 +1,25 @@ -import type { FC, SVGProps } from 'react'; +import { useId, type FC, type SVGProps } from 'react'; /** * Special Resources icon * @figma https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp?node-id=4863:3553 */ -export const SpecialResources: FC> = (props) => ( - - - - - - - - - - -); +export const SpecialResources: FC> = (props) => { + const clipId = useId(); + + return ( + + + + + + + + + + + ); +};