diff --git a/packages/design-system/src/components/ds-alert-banner/ds-alert-banner-global.figma.ts b/packages/design-system/src/components/ds-alert-banner/ds-alert-banner-global.figma.ts new file mode 100644 index 000000000..d5084e27b --- /dev/null +++ b/packages/design-system/src/components/ds-alert-banner/ds-alert-banner-global.figma.ts @@ -0,0 +1,49 @@ +// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=15271-7357 +// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-alert-banner +// component=DsAlertBanner +// +// `DsAlertBannerGlobalV1` is the full-width bar pinned to the top of the viewport. It +// maps to the same `DsAlertBanner` as the inline card but without `inline` (the +// default `global` layout) and with no title. See `ds-alert-banner.figma.ts` for the +// inline variant. +import figma from 'figma'; + +const instance = figma.selectedInstance; + +const variant = instance.getEnum('Type', { + 'info neutral': 'info-neutral', + 'info blue': 'info-blue', + warning: 'warning', + error: 'error', + success: 'success', +}); + +// The status icon is set automatically by `Type` in Figma; mirror that mapping so the +// snippet passes the matching `DsIcon` name. +const icon = instance.getEnum('Type', { + 'info neutral': 'info', + 'info blue': 'info', + warning: 'warning', + error: 'error', + success: 'check_circle', +}); + +const closable = instance.getBoolean('Show Dismiss Button'); +const showActions = instance.getBoolean('Show Actions'); + +const closableAttr = closable ? ' closable' : ''; +const actionsBlock = showActions + ? `\n\t\n\t\tAction\n\t` + : ''; + +export default { + example: figma.code` {}} variant="${variant}" icon="${icon}"${closableAttr}> + Description${actionsBlock} +`, + imports: [ + "import { DsAlertBanner } from '@drivenets/design-system';", + "import { DsButtonV3 } from '@drivenets/design-system';", + ], + id: 'ds-alert-banner-global', + metadata: { nestable: false }, +} satisfies figma.Template; diff --git a/packages/design-system/src/components/ds-alert-banner/ds-alert-banner.figma.ts b/packages/design-system/src/components/ds-alert-banner/ds-alert-banner.figma.ts new file mode 100644 index 000000000..77ec4e298 --- /dev/null +++ b/packages/design-system/src/components/ds-alert-banner/ds-alert-banner.figma.ts @@ -0,0 +1,51 @@ +// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=14850-7088 +// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-alert-banner +// component=DsAlertBanner +// +// `DsAlertBannerInlineV1` is the inline (bordered card) banner that sits in normal +// document flow. It maps to the controlled `DsAlertBanner` with `inline`. The +// full-width, top-of-viewport `DsAlertBannerGlobalV1` maps to the same component +// without `inline` — see `ds-alert-banner-global.figma.ts`. +import figma from 'figma'; + +const instance = figma.selectedInstance; + +const variant = instance.getEnum('Type', { + 'Info Neutral': 'info-neutral', + 'Info Blue': 'info-blue', + Warning: 'warning', + Error: 'error', + Success: 'success', +}); + +// The status icon is set automatically by `Type` in Figma; mirror that mapping so the +// snippet passes the matching `DsIcon` name. +const icon = instance.getEnum('Type', { + 'Info Neutral': 'info', + 'Info Blue': 'info', + Warning: 'warning', + Error: 'error', + Success: 'check_circle', +}); + +const closable = instance.getBoolean('Show Dismiss Button'); +const showTitle = instance.getBoolean('Show Titles'); +const showActions = instance.getBoolean('Show Actions'); + +const closableAttr = closable ? ' closable' : ''; +const titleLine = showTitle ? `\n\tTitle` : ''; +const actionsBlock = showActions + ? `\n\t\n\t\tAction\n\t` + : ''; + +export default { + example: figma.code` {}} inline variant="${variant}" icon="${icon}"${closableAttr}>${titleLine} + Description${actionsBlock} +`, + imports: [ + "import { DsAlertBanner } from '@drivenets/design-system';", + "import { DsButtonV3 } from '@drivenets/design-system';", + ], + id: 'ds-alert-banner', + metadata: { nestable: false }, +} satisfies figma.Template; diff --git a/packages/design-system/src/components/ds-tree/ds-tree.figma.ts b/packages/design-system/src/components/ds-tree/ds-tree.figma.ts new file mode 100644 index 000000000..3771fd25f --- /dev/null +++ b/packages/design-system/src/components/ds-tree/ds-tree.figma.ts @@ -0,0 +1,54 @@ +// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=34873-157787 +// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-tree +// component=DsTree +// +// `DsTreeV2` is the collection-driven tree. Figma models the branch/item sub-parts +// (branch-control, branch-text, item-text, indicators, indent guide) as separate +// components and exposes `side nav` / `map` / `workflows` preview presets via +// `Property 1`, but code never hand-assembles those parts: it composes `DsTree.Root` +// with a `createDsTreeCollection` data source and one recursive `DsTree.NodeProvider` +// renderer. The snippet is the canonical usage referenced by the Storybook docs. +import figma from 'figma'; + +export default { + example: figma.code`const collection = createDsTreeCollection([ + { + id: 'network', + name: 'Network', + children: [ + { id: 'routers', name: 'Routers', children: [{ id: 'router-1', name: 'Router Alpha' }] }, + { id: 'firewall-1', name: 'Firewall Primary' }, + ], + }, + { id: 'monitoring', name: 'Monitoring', children: [{ id: 'alerts', name: 'Alerts' }] }, +]); + + + + {collection.rootNode.children?.map((node, index) => ( + + {node.children ? ( + + + + {node.name} + + + + {/* recurse over node.children with another DsTree.NodeProvider */} + + + ) : ( + + + {node.name} + + )} + + ))} + +`, + imports: ["import { DsTree, createDsTreeCollection } from '@drivenets/design-system';"], + id: 'ds-tree', + metadata: { nestable: false }, +} satisfies figma.Template;