From f73d6530a159ecb5a8bafdf6120ce0415bfb33ef Mon Sep 17 00:00:00 2001 From: Emily Xiong Date: Fri, 3 May 2024 12:08:36 -0400 Subject: [PATCH] fix(graph): add grayscale to technology icon (#23107) ## Current Behavior ## Expected Behavior ## Related Issue(s) Fixes # --- .../ui-icons/src/lib/technologies/angular.tsx | 14 +++ .../ui-icons/src/lib/technologies/cypress.tsx | 14 +++ .../ui-icons/src/lib/technologies/esbuild.tsx | 14 +++ .../ui-icons/src/lib/technologies/eslint.tsx | 14 +++ graph/ui-icons/src/lib/technologies/expo.tsx | 14 +++ .../ui-icons/src/lib/technologies/express.tsx | 14 +++ .../ui-icons/src/lib/technologies/gradle.tsx | 14 +++ graph/ui-icons/src/lib/technologies/html5.tsx | 14 +++ .../src/lib/technologies/javascript.tsx | 14 +++ graph/ui-icons/src/lib/technologies/jest.tsx | 14 +++ .../ui-icons/src/lib/technologies/nestjs.tsx | 14 +++ .../ui-icons/src/lib/technologies/nextjs.tsx | 14 +++ .../ui-icons/src/lib/technologies/nodejs.tsx | 14 +++ .../ui-icons/src/lib/technologies/nuxtjs.tsx | 14 +++ .../src/lib/technologies/playwright.tsx | 14 +++ .../src/lib/technologies/prettier.tsx | 14 +++ graph/ui-icons/src/lib/technologies/react.tsx | 14 +++ graph/ui-icons/src/lib/technologies/remix.tsx | 14 +++ .../ui-icons/src/lib/technologies/rollup.tsx | 14 +++ .../ui-icons/src/lib/technologies/rspack.tsx | 14 +++ .../src/lib/technologies/storybook.tsx | 14 +++ .../src/lib/technologies/typescript.tsx | 14 +++ graph/ui-icons/src/lib/technologies/vite.tsx | 14 +++ .../ui-icons/src/lib/technologies/vitest.tsx | 14 +++ graph/ui-icons/src/lib/technologies/vue.tsx | 14 +++ .../ui-icons/src/lib/technologies/webpack.tsx | 14 +++ .../src/lib/technology-icon.stories.tsx | 36 ++++++ graph/ui-icons/src/lib/technology-icon.tsx | 115 ++++++++++++++++-- ...nology-icons-map-monochromatic.stories.tsx | 27 ++++ .../technology-icons-map-monochromatic.tsx | 61 ++++++++++ .../lib/project-details/project-details.tsx | 1 + .../target-configuration-details-header.tsx | 1 + .../target-technologies.tsx | 6 +- .../src/lib/tags/call-to-action.component.tsx | 6 +- 34 files changed, 604 insertions(+), 13 deletions(-) create mode 100644 graph/ui-icons/src/lib/technologies/angular.tsx create mode 100644 graph/ui-icons/src/lib/technologies/cypress.tsx create mode 100644 graph/ui-icons/src/lib/technologies/esbuild.tsx create mode 100644 graph/ui-icons/src/lib/technologies/eslint.tsx create mode 100644 graph/ui-icons/src/lib/technologies/expo.tsx create mode 100644 graph/ui-icons/src/lib/technologies/express.tsx create mode 100644 graph/ui-icons/src/lib/technologies/gradle.tsx create mode 100644 graph/ui-icons/src/lib/technologies/html5.tsx create mode 100644 graph/ui-icons/src/lib/technologies/javascript.tsx create mode 100644 graph/ui-icons/src/lib/technologies/jest.tsx create mode 100644 graph/ui-icons/src/lib/technologies/nestjs.tsx create mode 100644 graph/ui-icons/src/lib/technologies/nextjs.tsx create mode 100644 graph/ui-icons/src/lib/technologies/nodejs.tsx create mode 100644 graph/ui-icons/src/lib/technologies/nuxtjs.tsx create mode 100644 graph/ui-icons/src/lib/technologies/playwright.tsx create mode 100644 graph/ui-icons/src/lib/technologies/prettier.tsx create mode 100644 graph/ui-icons/src/lib/technologies/react.tsx create mode 100644 graph/ui-icons/src/lib/technologies/remix.tsx create mode 100644 graph/ui-icons/src/lib/technologies/rollup.tsx create mode 100644 graph/ui-icons/src/lib/technologies/rspack.tsx create mode 100644 graph/ui-icons/src/lib/technologies/storybook.tsx create mode 100644 graph/ui-icons/src/lib/technologies/typescript.tsx create mode 100644 graph/ui-icons/src/lib/technologies/vite.tsx create mode 100644 graph/ui-icons/src/lib/technologies/vitest.tsx create mode 100644 graph/ui-icons/src/lib/technologies/vue.tsx create mode 100644 graph/ui-icons/src/lib/technologies/webpack.tsx create mode 100644 graph/ui-icons/src/lib/technology-icons-map-monochromatic.stories.tsx create mode 100644 graph/ui-icons/src/lib/technology-icons-map-monochromatic.tsx diff --git a/graph/ui-icons/src/lib/technologies/angular.tsx b/graph/ui-icons/src/lib/technologies/angular.tsx new file mode 100644 index 0000000000..f581bb1d3c --- /dev/null +++ b/graph/ui-icons/src/lib/technologies/angular.tsx @@ -0,0 +1,14 @@ +import { FC, SVGProps } from 'react'; + +export const AngularIcon: FC> = (props) => ( + + Angular + + +); diff --git a/graph/ui-icons/src/lib/technologies/cypress.tsx b/graph/ui-icons/src/lib/technologies/cypress.tsx new file mode 100644 index 0000000000..1edcea194d --- /dev/null +++ b/graph/ui-icons/src/lib/technologies/cypress.tsx @@ -0,0 +1,14 @@ +import { FC, SVGProps } from 'react'; + +export const CypressIcon: FC> = (props) => ( + + Cypress + + +); diff --git a/graph/ui-icons/src/lib/technologies/esbuild.tsx b/graph/ui-icons/src/lib/technologies/esbuild.tsx new file mode 100644 index 0000000000..12f8006410 --- /dev/null +++ b/graph/ui-icons/src/lib/technologies/esbuild.tsx @@ -0,0 +1,14 @@ +import { FC, SVGProps } from 'react'; + +export const EsbuildIcon: FC> = (props) => ( + + esbuild + + +); diff --git a/graph/ui-icons/src/lib/technologies/eslint.tsx b/graph/ui-icons/src/lib/technologies/eslint.tsx new file mode 100644 index 0000000000..40138eed4d --- /dev/null +++ b/graph/ui-icons/src/lib/technologies/eslint.tsx @@ -0,0 +1,14 @@ +import { FC, SVGProps } from 'react'; + +export const EslintIcon: FC> = (props) => ( + + ESLint + + +); diff --git a/graph/ui-icons/src/lib/technologies/expo.tsx b/graph/ui-icons/src/lib/technologies/expo.tsx new file mode 100644 index 0000000000..31d1acf167 --- /dev/null +++ b/graph/ui-icons/src/lib/technologies/expo.tsx @@ -0,0 +1,14 @@ +import { FC, SVGProps } from 'react'; + +export const ExpoIcon: FC> = (props) => ( + + Expo + + +); diff --git a/graph/ui-icons/src/lib/technologies/express.tsx b/graph/ui-icons/src/lib/technologies/express.tsx new file mode 100644 index 0000000000..5968a72072 --- /dev/null +++ b/graph/ui-icons/src/lib/technologies/express.tsx @@ -0,0 +1,14 @@ +import { FC, SVGProps } from 'react'; + +export const ExpressIcon: FC> = (props) => ( + + Express + + +); diff --git a/graph/ui-icons/src/lib/technologies/gradle.tsx b/graph/ui-icons/src/lib/technologies/gradle.tsx new file mode 100644 index 0000000000..5cb00cecd1 --- /dev/null +++ b/graph/ui-icons/src/lib/technologies/gradle.tsx @@ -0,0 +1,14 @@ +import { FC, SVGProps } from 'react'; + +export const GradleIcon: FC> = (props) => ( + + Gradle + + +); diff --git a/graph/ui-icons/src/lib/technologies/html5.tsx b/graph/ui-icons/src/lib/technologies/html5.tsx new file mode 100644 index 0000000000..b0651c113c --- /dev/null +++ b/graph/ui-icons/src/lib/technologies/html5.tsx @@ -0,0 +1,14 @@ +import { FC, SVGProps } from 'react'; + +export const HTML5Icon: FC> = (props) => ( + + HTML5 + + +); diff --git a/graph/ui-icons/src/lib/technologies/javascript.tsx b/graph/ui-icons/src/lib/technologies/javascript.tsx new file mode 100644 index 0000000000..fdcf1dcb74 --- /dev/null +++ b/graph/ui-icons/src/lib/technologies/javascript.tsx @@ -0,0 +1,14 @@ +import { FC, SVGProps } from 'react'; + +export const JavaScriptIcon: FC> = (props) => ( + + JavaScript + + +); diff --git a/graph/ui-icons/src/lib/technologies/jest.tsx b/graph/ui-icons/src/lib/technologies/jest.tsx new file mode 100644 index 0000000000..3374a50e6a --- /dev/null +++ b/graph/ui-icons/src/lib/technologies/jest.tsx @@ -0,0 +1,14 @@ +import { FC, SVGProps } from 'react'; + +export const JestIcon: FC> = (props) => ( + + Jest + + +); diff --git a/graph/ui-icons/src/lib/technologies/nestjs.tsx b/graph/ui-icons/src/lib/technologies/nestjs.tsx new file mode 100644 index 0000000000..a64875fe2f --- /dev/null +++ b/graph/ui-icons/src/lib/technologies/nestjs.tsx @@ -0,0 +1,14 @@ +import { FC, SVGProps } from 'react'; + +export const NestJSIcon: FC> = (props) => ( + + NestJS + + +); diff --git a/graph/ui-icons/src/lib/technologies/nextjs.tsx b/graph/ui-icons/src/lib/technologies/nextjs.tsx new file mode 100644 index 0000000000..2f950bc8dc --- /dev/null +++ b/graph/ui-icons/src/lib/technologies/nextjs.tsx @@ -0,0 +1,14 @@ +import { FC, SVGProps } from 'react'; + +export const NextJSIcon: FC> = (props) => ( + + Next.js + + +); diff --git a/graph/ui-icons/src/lib/technologies/nodejs.tsx b/graph/ui-icons/src/lib/technologies/nodejs.tsx new file mode 100644 index 0000000000..850ae53a7e --- /dev/null +++ b/graph/ui-icons/src/lib/technologies/nodejs.tsx @@ -0,0 +1,14 @@ +import { FC, SVGProps } from 'react'; + +export const NodeIcon: FC> = (props) => ( + + Node.js + + +); diff --git a/graph/ui-icons/src/lib/technologies/nuxtjs.tsx b/graph/ui-icons/src/lib/technologies/nuxtjs.tsx new file mode 100644 index 0000000000..45525aa42e --- /dev/null +++ b/graph/ui-icons/src/lib/technologies/nuxtjs.tsx @@ -0,0 +1,14 @@ +import { FC, SVGProps } from 'react'; + +export const NuxtIcon: FC> = (props) => ( + + Nuxt + + +); diff --git a/graph/ui-icons/src/lib/technologies/playwright.tsx b/graph/ui-icons/src/lib/technologies/playwright.tsx new file mode 100644 index 0000000000..7355ae4b65 --- /dev/null +++ b/graph/ui-icons/src/lib/technologies/playwright.tsx @@ -0,0 +1,14 @@ +import { FC, SVGProps } from 'react'; + +export const PlaywrightIcon: FC> = (props) => ( + + Playwright + + +); diff --git a/graph/ui-icons/src/lib/technologies/prettier.tsx b/graph/ui-icons/src/lib/technologies/prettier.tsx new file mode 100644 index 0000000000..0c9595d6d9 --- /dev/null +++ b/graph/ui-icons/src/lib/technologies/prettier.tsx @@ -0,0 +1,14 @@ +import { FC, SVGProps } from 'react'; + +export const PrettierIcon: FC> = (props) => ( + + Prettier + + +); diff --git a/graph/ui-icons/src/lib/technologies/react.tsx b/graph/ui-icons/src/lib/technologies/react.tsx new file mode 100644 index 0000000000..53608823f1 --- /dev/null +++ b/graph/ui-icons/src/lib/technologies/react.tsx @@ -0,0 +1,14 @@ +import { FC, SVGProps } from 'react'; + +export const ReactIcon: FC> = (props) => ( + + React + + +); diff --git a/graph/ui-icons/src/lib/technologies/remix.tsx b/graph/ui-icons/src/lib/technologies/remix.tsx new file mode 100644 index 0000000000..89f93d08f6 --- /dev/null +++ b/graph/ui-icons/src/lib/technologies/remix.tsx @@ -0,0 +1,14 @@ +import { FC, SVGProps } from 'react'; + +export const RemixIcon: FC> = (props) => ( + + Remix + + +); diff --git a/graph/ui-icons/src/lib/technologies/rollup.tsx b/graph/ui-icons/src/lib/technologies/rollup.tsx new file mode 100644 index 0000000000..f5dd0e16cc --- /dev/null +++ b/graph/ui-icons/src/lib/technologies/rollup.tsx @@ -0,0 +1,14 @@ +import { FC, SVGProps } from 'react'; + +export const RollupIcon: FC> = (props) => ( + + Rollup + + +); diff --git a/graph/ui-icons/src/lib/technologies/rspack.tsx b/graph/ui-icons/src/lib/technologies/rspack.tsx new file mode 100644 index 0000000000..da927bed2f --- /dev/null +++ b/graph/ui-icons/src/lib/technologies/rspack.tsx @@ -0,0 +1,14 @@ +import { FC, SVGProps } from 'react'; + +export const RspackIcon: FC> = (props) => ( + + Rspack + + +); diff --git a/graph/ui-icons/src/lib/technologies/storybook.tsx b/graph/ui-icons/src/lib/technologies/storybook.tsx new file mode 100644 index 0000000000..bd4d072815 --- /dev/null +++ b/graph/ui-icons/src/lib/technologies/storybook.tsx @@ -0,0 +1,14 @@ +import { FC, SVGProps } from 'react'; + +export const StorybookIcon: FC> = (props) => ( + + Storybook + + +); diff --git a/graph/ui-icons/src/lib/technologies/typescript.tsx b/graph/ui-icons/src/lib/technologies/typescript.tsx new file mode 100644 index 0000000000..4493f989bf --- /dev/null +++ b/graph/ui-icons/src/lib/technologies/typescript.tsx @@ -0,0 +1,14 @@ +import { FC, SVGProps } from 'react'; + +export const TypeScriptIcon: FC> = (props) => ( + + TypeScript + + +); diff --git a/graph/ui-icons/src/lib/technologies/vite.tsx b/graph/ui-icons/src/lib/technologies/vite.tsx new file mode 100644 index 0000000000..3c6d809c04 --- /dev/null +++ b/graph/ui-icons/src/lib/technologies/vite.tsx @@ -0,0 +1,14 @@ +import { FC, SVGProps } from 'react'; + +export const ViteIcon: FC> = (props) => ( + + Vite + + +); diff --git a/graph/ui-icons/src/lib/technologies/vitest.tsx b/graph/ui-icons/src/lib/technologies/vitest.tsx new file mode 100644 index 0000000000..ec4d059b2f --- /dev/null +++ b/graph/ui-icons/src/lib/technologies/vitest.tsx @@ -0,0 +1,14 @@ +import { FC, SVGProps } from 'react'; + +export const VitestIcon: FC> = (props) => ( + + Vitest + + +); diff --git a/graph/ui-icons/src/lib/technologies/vue.tsx b/graph/ui-icons/src/lib/technologies/vue.tsx new file mode 100644 index 0000000000..6086580476 --- /dev/null +++ b/graph/ui-icons/src/lib/technologies/vue.tsx @@ -0,0 +1,14 @@ +import { FC, SVGProps } from 'react'; + +export const VueIcon: FC> = (props) => ( + + Vue.js + + +); diff --git a/graph/ui-icons/src/lib/technologies/webpack.tsx b/graph/ui-icons/src/lib/technologies/webpack.tsx new file mode 100644 index 0000000000..0b0b927aac --- /dev/null +++ b/graph/ui-icons/src/lib/technologies/webpack.tsx @@ -0,0 +1,14 @@ +import { FC, SVGProps } from 'react'; + +export const WebpackIcon: FC> = (props) => ( + + Webpack + + +); diff --git a/graph/ui-icons/src/lib/technology-icon.stories.tsx b/graph/ui-icons/src/lib/technology-icon.stories.tsx index 594b87b8d9..0bdc92e22f 100644 --- a/graph/ui-icons/src/lib/technology-icon.stories.tsx +++ b/graph/ui-icons/src/lib/technology-icon.stories.tsx @@ -15,8 +15,44 @@ export const Simple: Story = { }, }; +export const SimpleLarge: Story = { + args: { + technology: 'react', + className: 'h-8 w-8', + }, +}; + +export const Monochromatic: Story = { + args: { + technology: 'react', + monochromatic: true, + }, +}; + +export const MonochromaticLarge: Story = { + args: { + technology: 'react', + monochromatic: true, + className: 'h-8 w-8', + }, +}; + export const UnknownTechnology: Story = { args: { technology: 'unknown', }, }; + +export const UnknownTechnologyLarge: Story = { + args: { + technology: 'unknown', + className: 'h-8 w-8', + }, +}; + +export const MonochromaticUnknownTechnology: Story = { + args: { + technology: 'unknown', + monochromatic: true, + }, +}; diff --git a/graph/ui-icons/src/lib/technology-icon.tsx b/graph/ui-icons/src/lib/technology-icon.tsx index 857a963c9b..ad6c9d1458 100644 --- a/graph/ui-icons/src/lib/technology-icon.tsx +++ b/graph/ui-icons/src/lib/technology-icon.tsx @@ -1,33 +1,128 @@ +import { HTMLProps } from 'react'; +import { twMerge } from 'tailwind-merge'; import { Framework, frameworkIcons } from './framework-icons'; +import { MonochromaticTechnologyIconsMap } from './technology-icons-map-monochromatic'; -export interface TechnologyIconProps { +export interface TechnologyIconProps extends HTMLProps { technology?: string; showTooltip?: boolean; + monochromatic?: boolean; } export function TechnologyIcon({ technology, showTooltip, + monochromatic, + ...props +}: TechnologyIconProps) { + if (!technology) { + return null; + } + if (monochromatic) { + return ( + + ); + } + return ( + + ); +} + +function UnknownTechnologyIcon({ + technology, + showTooltip, + ...props +}: TechnologyIconProps) { + if (!technology) { + return null; + } + return ( +
+ {technology[0]} +
+ ); +} + +export function TechnologyIconMonochromatic({ + technology, + showTooltip, + ...props +}: TechnologyIconProps) { + if (!technology) { + return null; + } + const Icon = MonochromaticTechnologyIconsMap[technology as any]?.icon; + + if (!Icon) { + return ( + + ); + } + + return ( +
+ +
+ ); +} + +export function TechnologyIconColor({ + technology, + showTooltip, + ...props }: TechnologyIconProps) { if (!technology) { return null; } const image = frameworkIcons[technology as Framework]?.image; + if (!image) { + return ( + + ); + } + return (
- {image ?? technology[0]} + {image}
); } diff --git a/graph/ui-icons/src/lib/technology-icons-map-monochromatic.stories.tsx b/graph/ui-icons/src/lib/technology-icons-map-monochromatic.stories.tsx new file mode 100644 index 0000000000..c17c1ef5cf --- /dev/null +++ b/graph/ui-icons/src/lib/technology-icons-map-monochromatic.stories.tsx @@ -0,0 +1,27 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { MonochromaticTechnologyIconsMap } from './technology-icons-map-monochromatic'; + +const meta: Meta = { + component: () => ( + <> + {Object.keys(MonochromaticTechnologyIconsMap).map((key) => { + const Icon = MonochromaticTechnologyIconsMap[key].icon; + return ( + <> +
{key}
+
+ +
+ + ); + })} + + ), + title: 'MonochromaticTechnologyIconsMap', +}; +export default meta; +type Story = StoryObj; + +export const Primary: Story = { + args: {}, +}; diff --git a/graph/ui-icons/src/lib/technology-icons-map-monochromatic.tsx b/graph/ui-icons/src/lib/technology-icons-map-monochromatic.tsx new file mode 100644 index 0000000000..d56b8c2129 --- /dev/null +++ b/graph/ui-icons/src/lib/technology-icons-map-monochromatic.tsx @@ -0,0 +1,61 @@ +import { FunctionComponent, SVGProps } from 'react'; +import { AngularIcon } from './technologies/angular'; +import { CypressIcon } from './technologies/cypress'; +import { EsbuildIcon } from './technologies/esbuild'; +import { EslintIcon } from './technologies/eslint'; +import { ExpoIcon } from './technologies/expo'; +import { ExpressIcon } from './technologies/express'; +import { GradleIcon } from './technologies/gradle'; +import { HTML5Icon } from './technologies/html5'; +import { JavaScriptIcon } from './technologies/javascript'; +import { JestIcon } from './technologies/jest'; +import { NestJSIcon } from './technologies/nestjs'; +import { NextJSIcon } from './technologies/nextjs'; +import { NodeIcon } from './technologies/nodejs'; +import { NuxtIcon } from './technologies/nuxtjs'; +import { PlaywrightIcon } from './technologies/playwright'; +import { PrettierIcon } from './technologies/prettier'; +import { ReactIcon } from './technologies/react'; +import { RemixIcon } from './technologies/remix'; +import { RollupIcon } from './technologies/rollup'; +import { RspackIcon } from './technologies/rspack'; +import { StorybookIcon } from './technologies/storybook'; +import { TypeScriptIcon } from './technologies/typescript'; +import { ViteIcon } from './technologies/vite'; +import { VitestIcon } from './technologies/vitest'; +import { VueIcon } from './technologies/vue'; +import { WebpackIcon } from './technologies/webpack'; + +export const MonochromaticTechnologyIconsMap: Record< + string, + { icon: FunctionComponent> } +> = { + angular: { icon: AngularIcon }, + cypress: { icon: CypressIcon }, + detox: { icon: ReactIcon }, + esbuild: { icon: EsbuildIcon }, + eslint: { icon: EslintIcon }, + expo: { icon: ExpoIcon }, + express: { icon: ExpressIcon }, + gradle: { icon: GradleIcon }, + javascript: { icon: JavaScriptIcon }, + jest: { icon: JestIcon }, + nest: { icon: NestJSIcon }, + next: { icon: NextJSIcon }, + node: { icon: NodeIcon }, + nuxt: { icon: NuxtIcon }, + playwright: { icon: PlaywrightIcon }, + prettier: { icon: PrettierIcon }, + react: { icon: ReactIcon }, + reactnative: { icon: ReactIcon }, + remix: { icon: RemixIcon }, + rollup: { icon: RollupIcon }, + rspack: { icon: RspackIcon }, + storybook: { icon: StorybookIcon }, + typescript: { icon: TypeScriptIcon }, + vite: { icon: ViteIcon }, + vitest: { icon: VitestIcon }, + vue: { icon: VueIcon }, + webcomponents: { icon: HTML5Icon }, + webpack: { icon: WebpackIcon }, +}; diff --git a/graph/ui-project-details/src/lib/project-details/project-details.tsx b/graph/ui-project-details/src/lib/project-details/project-details.tsx index 2cfa71edb1..6393359aa2 100644 --- a/graph/ui-project-details/src/lib/project-details/project-details.tsx +++ b/graph/ui-project-details/src/lib/project-details/project-details.tsx @@ -83,6 +83,7 @@ export const ProjectDetails = ({ diff --git a/graph/ui-project-details/src/lib/target-configuration-details-header/target-configuration-details-header.tsx b/graph/ui-project-details/src/lib/target-configuration-details-header/target-configuration-details-header.tsx index 4b8779cd26..5336cefc7b 100644 --- a/graph/ui-project-details/src/lib/target-configuration-details-header/target-configuration-details-header.tsx +++ b/graph/ui-project-details/src/lib/target-configuration-details-header/target-configuration-details-header.tsx @@ -81,6 +81,7 @@ export const TargetConfigurationDetailsHeader = ({ {isCollasped && targetConfiguration?.executor !== '@nx/js:release-publish' && ( diff --git a/graph/ui-project-details/src/lib/target-technologies/target-technologies.tsx b/graph/ui-project-details/src/lib/target-technologies/target-technologies.tsx index c4409e048d..22860c120e 100644 --- a/graph/ui-project-details/src/lib/target-technologies/target-technologies.tsx +++ b/graph/ui-project-details/src/lib/target-technologies/target-technologies.tsx @@ -1,6 +1,7 @@ import { TechnologyIcon } from '@nx/graph/ui-icons'; +import { HTMLProps } from 'react'; -export interface TargetTechnologiesProps { +export interface TargetTechnologiesProps extends HTMLProps { technologies?: string[]; showTooltip?: boolean; } @@ -8,6 +9,7 @@ export interface TargetTechnologiesProps { export function TargetTechnologies({ technologies, showTooltip, + ...props }: TargetTechnologiesProps) { if (!technologies || technologies.length === 0) { return null; @@ -19,6 +21,8 @@ export function TargetTechnologies({ key={index} technology={technology} showTooltip={showTooltip} + monochromatic={true} + {...props} /> ))} diff --git a/nx-dev/ui-markdoc/src/lib/tags/call-to-action.component.tsx b/nx-dev/ui-markdoc/src/lib/tags/call-to-action.component.tsx index 9b96ccb4e2..2d149810b7 100644 --- a/nx-dev/ui-markdoc/src/lib/tags/call-to-action.component.tsx +++ b/nx-dev/ui-markdoc/src/lib/tags/call-to-action.component.tsx @@ -1,5 +1,5 @@ import { ChevronRightIcon } from '@heroicons/react/24/outline'; -import { frameworkIcons } from '@nx/graph/ui-icons'; +import { Framework, frameworkIcons } from '@nx/graph/ui-icons'; export function CallToAction({ url, @@ -18,7 +18,9 @@ export function CallToAction({
-
{icon && frameworkIcons[icon]?.image}
+
+ {icon && frameworkIcons[icon as Framework]?.image} +