diff --git a/change/@ni-spright-angular-acdc1b80-e7d4-4bf0-af8b-35b4926429e7.json b/change/@ni-spright-angular-acdc1b80-e7d4-4bf0-af8b-35b4926429e7.json new file mode 100644 index 0000000000..399c0698e3 --- /dev/null +++ b/change/@ni-spright-angular-acdc1b80-e7d4-4bf0-af8b-35b4926429e7.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "Add Angular standalone wrapper for spright work item square list cog icon", + "packageName": "@ni/spright-angular", + "email": "123377523+vivinkrishna-ni@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@ni-spright-components-0626309b-5848-495b-bb0f-fc3bd50e54da.json b/change/@ni-spright-components-0626309b-5848-495b-bb0f-fc3bd50e54da.json new file mode 100644 index 0000000000..2168a091ed --- /dev/null +++ b/change/@ni-spright-components-0626309b-5848-495b-bb0f-fc3bd50e54da.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "Add spright work item square list cog icon using work-order border theme token", + "packageName": "@ni/spright-components", + "email": "123377523+vivinkrishna-ni@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/packages/angular-workspace/spright-angular/icons/work-item-square-list-cog/ng-package.json b/packages/angular-workspace/spright-angular/icons/work-item-square-list-cog/ng-package.json new file mode 100644 index 0000000000..f372f60b7c --- /dev/null +++ b/packages/angular-workspace/spright-angular/icons/work-item-square-list-cog/ng-package.json @@ -0,0 +1,6 @@ +{ + "$schema": "../../../../../node_modules/ng-packagr/ng-package.schema.json", + "lib": { + "entryFile": "spright-icon-work-item-square-list-cog.directive.ts" + } +} diff --git a/packages/angular-workspace/spright-angular/icons/work-item-square-list-cog/spright-icon-work-item-square-list-cog.directive.ts b/packages/angular-workspace/spright-angular/icons/work-item-square-list-cog/spright-icon-work-item-square-list-cog.directive.ts new file mode 100644 index 0000000000..deb4253a0f --- /dev/null +++ b/packages/angular-workspace/spright-angular/icons/work-item-square-list-cog/spright-icon-work-item-square-list-cog.directive.ts @@ -0,0 +1,16 @@ +import { Directive } from '@angular/core'; +import { type IconWorkItemSquareListCog, iconWorkItemSquareListCogTag } from '@ni/spright-components/dist/esm/icons/work-item-square-list-cog'; +import '@ni/spright-components/dist/esm/icons/work-item-square-list-cog'; +import { SprightIconBaseDirective } from '@ni/spright-angular/icon-base'; + +export { type IconWorkItemSquareListCog, iconWorkItemSquareListCogTag }; + +/** + * Spright square list cog icon directive for work order items + */ +@Directive({ + selector: 'spright-icon-work-item-square-list-cog', + standalone: true +}) +export class SprightIconWorkItemSquareListCogDirective extends SprightIconBaseDirective { +} diff --git a/packages/spright-components/src/icon-base/tests/icon-metadata.ts b/packages/spright-components/src/icon-base/tests/icon-metadata.ts index 936e6e01be..977dbba280 100644 --- a/packages/spright-components/src/icon-base/tests/icon-metadata.ts +++ b/packages/spright-components/src/icon-base/tests/icon-metadata.ts @@ -46,6 +46,9 @@ export const iconMetadata: { IconWorkItemRectangleCheckLines: { tags: ['testing', 'verification', 'quality assurance', 'checklist'] }, + IconWorkItemSquareListCog: { + tags: ['work order', 'tasks', 'list', 'planning', 'operations'] + }, IconWorkItemUserHelmetSafety: { tags: ['job', 'work', 'worker', 'operator', 'technician', 'safety'] }, diff --git a/packages/spright-components/src/icons/all-icons.ts b/packages/spright-components/src/icons/all-icons.ts index ff9abaf5c5..22ca695dda 100644 --- a/packages/spright-components/src/icons/all-icons.ts +++ b/packages/spright-components/src/icons/all-icons.ts @@ -10,5 +10,6 @@ export { IconWorkItemCalendarWeek } from './work-item-calendar-week'; export { IconWorkItemCalipers } from './work-item-calipers'; export { IconWorkItemForklift } from './work-item-forklift'; export { IconWorkItemRectangleCheckLines } from './work-item-rectangle-check-lines'; +export { IconWorkItemSquareListCog } from './work-item-square-list-cog'; export { IconWorkItemUserHelmetSafety } from './work-item-user-helmet-safety'; export { IconWorkItemWrenchHammer } from './work-item-wrench-hammer'; diff --git a/packages/spright-components/src/icons/work-item-square-list-cog/index.ts b/packages/spright-components/src/icons/work-item-square-list-cog/index.ts new file mode 100644 index 0000000000..676640a93b --- /dev/null +++ b/packages/spright-components/src/icons/work-item-square-list-cog/index.ts @@ -0,0 +1,32 @@ +import { squareListCog16X16 } from '@ni/nimble-tokens/dist/icons/js'; +import { IconSvg } from '@ni/nimble-components/dist/esm/icon-svg'; +import { template } from '@ni/nimble-components/dist/esm/icon-svg/template'; +import { DesignSystem } from '@ni/fast-foundation'; +import { styles } from './styles'; + +declare global { + interface HTMLElementTagNameMap { + 'spright-icon-work-item-square-list-cog': IconWorkItemSquareListCog; + } +} + +/** + * Spright square list cog icon for work order items + */ +export class IconWorkItemSquareListCog extends IconSvg { + public constructor() { + super(squareListCog16X16); + } +} + +const sprightIconWorkItemSquareListCog = IconWorkItemSquareListCog.compose({ + baseName: 'icon-work-item-square-list-cog', + template, + styles +}); + +DesignSystem.getOrCreate() + .withPrefix('spright') + .register(sprightIconWorkItemSquareListCog()); + +export const iconWorkItemSquareListCogTag = 'spright-icon-work-item-square-list-cog'; diff --git a/packages/spright-components/src/icons/work-item-square-list-cog/styles.ts b/packages/spright-components/src/icons/work-item-square-list-cog/styles.ts new file mode 100644 index 0000000000..2598d3b8e3 --- /dev/null +++ b/packages/spright-components/src/icons/work-item-square-list-cog/styles.ts @@ -0,0 +1,11 @@ +import { css } from '@ni/fast-element'; +import { calendarEventBorderWorkOrderColor } from '@ni/nimble-components/dist/esm/theme-provider/design-tokens'; +import { styles as iconSvgStyles } from '@ni/nimble-components/dist/esm/icon-svg/styles'; + +export const styles = css` + ${iconSvgStyles} + + .icon svg { + fill: ${calendarEventBorderWorkOrderColor}; + } +`;