diff --git a/components/Common/NodejsLogo/index.module.css b/components/Common/NodejsLogo/index.module.css index 7899c8c8e92e4..2e74ac633f684 100644 --- a/components/Common/NodejsLogo/index.module.css +++ b/components/Common/NodejsLogo/index.module.css @@ -1,12 +1,4 @@ -.nodejsLogoDark { +.nodejsLogo { @apply h-6 - w-20 - dark:hidden; -} - -.nodejsLogoLight { - @apply hidden - h-6 - w-20 - dark:block; + w-20; } diff --git a/components/Common/NodejsLogo/index.tsx b/components/Common/NodejsLogo/index.tsx index 6fead1ab85adc..7ca383e10c505 100644 --- a/components/Common/NodejsLogo/index.tsx +++ b/components/Common/NodejsLogo/index.tsx @@ -1,9 +1,6 @@ import type { FC } from 'react'; -import NodejsDark from '@/components/Icons/Logos/NodejsDark'; -import NodejsDarkPride from '@/components/Icons/Logos/NodejsDarkPride'; -import NodejsLight from '@/components/Icons/Logos/NodejsLight'; -import NodejsLightPride from '@/components/Icons/Logos/NodejsLightPride'; +import Nodejs from '@/components/Icons/Logos/Nodejs'; import type { LogoVariant } from '@/types'; import style from './index.module.css'; @@ -13,20 +10,7 @@ type NodejsLogoProps = { }; const NodejsLogo: FC = ({ variant = 'default' }) => ( - <> - {variant === 'pride' && ( - <> - - - - )} - {variant === 'default' && ( - <> - - - - )} - + ); export default NodejsLogo; diff --git a/components/Icons/Logos/NodejsLight.tsx b/components/Icons/Logos/Nodejs.tsx similarity index 59% rename from components/Icons/Logos/NodejsLight.tsx rename to components/Icons/Logos/Nodejs.tsx index d541b971f362a..b2e23629c94fa 100644 --- a/components/Icons/Logos/NodejsLight.tsx +++ b/components/Icons/Logos/Nodejs.tsx @@ -1,12 +1,24 @@ +import classNames from 'classnames'; import type { FC, SVGProps } from 'react'; -const NodejsLight: FC> = props => ( +import type { LogoVariant } from '@/types'; + +type HexagonGridProps = SVGProps & { + variant?: LogoVariant; +}; + +const Nodejs: FC = ({ + className, + variant = 'default', + ...props +}) => ( > = props => ( fillRule="evenodd" clipRule="evenodd" d="M43.6737 41.9539C43.6737 41.1204 43.2136 40.3334 42.4773 39.9165L23.0104 28.5712C22.6883 28.386 22.3201 28.2934 21.9519 28.2472C21.9059 28.2472 21.7679 28.2472 21.7679 28.2472C21.3997 28.2472 21.0315 28.386 20.7094 28.5712L1.19654 39.8701C0.460209 40.287 0 41.0743 0 41.9539L0.0460209 72.3315C0.0460209 72.7484 0.276126 73.165 0.644293 73.3502C1.01246 73.5819 1.47267 73.5819 1.79482 73.3502L13.3921 66.682C14.1284 66.2653 14.5886 65.4781 14.5886 64.6446V50.4282C14.5886 49.5947 15.0488 48.8074 15.7852 48.3908L20.7094 45.5197C21.0776 45.288 21.4917 45.1954 21.9059 45.1954C22.3201 45.1954 22.7343 45.288 23.0565 45.5197L27.9806 48.3908C28.7169 48.8074 29.1773 49.5947 29.1773 50.4282V64.6446C29.1773 65.4781 29.6375 66.2653 30.3738 66.682L41.8791 73.3502C42.2471 73.5819 42.7073 73.5819 43.0755 73.3502C43.4438 73.165 43.6737 72.7484 43.6737 72.3315V41.9539Z" - fill="white" /> > = props => ( d="M181.551 48.7155C181.689 48.6228 181.874 48.6228 182.012 48.7155L185.739 50.8919C185.877 50.9845 185.969 51.1235 185.969 51.3087V55.6615C185.969 55.8468 185.877 55.9858 185.739 56.0784L182.012 58.2548C181.874 58.3474 181.689 58.3474 181.551 58.2548L177.824 56.0784C177.686 55.9858 177.594 55.8468 177.594 55.6615V51.3087C177.594 51.1235 177.686 50.9845 177.824 50.8919L181.551 48.7155Z" fill="#5FA04E" /> - - - + + {variant === 'pride' ? ( + <> + + + + + + + + + + + + + ) : ( + <> + + + + + )} - - - - - - - - - - - - - - - - - - - - - + {variant === 'pride' ? ( + + + + + + ) : ( + + + + + + + + + + + + + + + + + + + + + + )} ); -export default NodejsLight; +export default Nodejs; diff --git a/components/Icons/Logos/NodejsDark.tsx b/components/Icons/Logos/NodejsDark.tsx deleted file mode 100644 index f913d72cf8a4a..0000000000000 --- a/components/Icons/Logos/NodejsDark.tsx +++ /dev/null @@ -1,118 +0,0 @@ -import type { FC, SVGProps } from 'react'; - -const NodejsDark: FC> = props => ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -); - -export default NodejsDark; diff --git a/components/Icons/Logos/NodejsDarkPride.tsx b/components/Icons/Logos/NodejsDarkPride.tsx deleted file mode 100644 index c7eb7845f86b2..0000000000000 --- a/components/Icons/Logos/NodejsDarkPride.tsx +++ /dev/null @@ -1,111 +0,0 @@ -import type { FC, SVGProps } from 'react'; - -const NodejsDarkPride: FC> = props => ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -); - -export default NodejsDarkPride; diff --git a/components/Icons/Logos/NodejsLightPride.tsx b/components/Icons/Logos/NodejsLightPride.tsx deleted file mode 100644 index f55f03d25287d..0000000000000 --- a/components/Icons/Logos/NodejsLightPride.tsx +++ /dev/null @@ -1,111 +0,0 @@ -import type { FC, SVGProps } from 'react'; - -const NodejsLightPride: FC> = props => ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -); - -export default NodejsLightPride; diff --git a/components/__design__/node-logos.stories.tsx b/components/__design__/node-logos.stories.tsx index 11f1311b47dc3..157a5cd3df709 100644 --- a/components/__design__/node-logos.stories.tsx +++ b/components/__design__/node-logos.stories.tsx @@ -2,31 +2,18 @@ import type { Meta as MetaObj, StoryObj } from '@storybook/react'; import JsIconGreen from '@/components/Icons/Logos/JsIconGreen'; import JsIconWhite from '@/components/Icons/Logos/JsIconWhite'; -import NodejsLogoDark from '@/components/Icons/Logos/NodejsDark'; -import NodejsDarkPride from '@/components/Icons/Logos/NodejsDarkPride'; -import NodejsLogoLight from '@/components/Icons/Logos/NodejsLight'; -import NodejsLightPride from '@/components/Icons/Logos/NodejsLightPride'; +import NodejsLogo from '@/components/Icons/Logos/Nodejs'; import NodejsStackedBlack from '@/components/Icons/Logos/NodejsStackedBlack'; import NodejsStackedDark from '@/components/Icons/Logos/NodejsStackedDark'; import NodejsStackedLight from '@/components/Icons/Logos/NodejsStackedLight'; import NodejsStackedWhite from '@/components/Icons/Logos/NodejsStackedWhite'; -export const HorizontalLogos: StoryObj = { - render: () => ( -
- - -
- ), +export const HorizontalLogo: StoryObj = { + render: () => , }; -export const PrideLogos: StoryObj = { - render: () => ( -
- - -
- ), +export const PrideLogo: StoryObj = { + render: () => , }; export const StackedLogos: StoryObj = {