diff --git a/apps/site/components/withNodejsLogo.tsx b/apps/site/components/withNodejsLogo.tsx index 87566aeb78b6b..7c482a28c8136 100644 --- a/apps/site/components/withNodejsLogo.tsx +++ b/apps/site/components/withNodejsLogo.tsx @@ -9,7 +9,7 @@ const WithNodejsLogo: FC = () => { return ( ); }; diff --git a/apps/site/public/static/logos/nodejsDark.svg b/apps/site/public/static/logos/nodejsDark.svg index 762745f046f60..d753d81dc88b0 100644 --- a/apps/site/public/static/logos/nodejsDark.svg +++ b/apps/site/public/static/logos/nodejsDark.svg @@ -1 +1,39 @@ - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/site/public/static/logos/nodejsDarkPride.svg b/apps/site/public/static/logos/nodejsDarkPride.svg index b6d0c77f854f3..39adc0c9bffaf 100644 --- a/apps/site/public/static/logos/nodejsDarkPride.svg +++ b/apps/site/public/static/logos/nodejsDarkPride.svg @@ -1 +1,52 @@ - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/site/public/static/logos/nodejsLight.svg b/apps/site/public/static/logos/nodejsLight.svg index 9fceb2a7d91e1..e6a066f815aa8 100644 --- a/apps/site/public/static/logos/nodejsLight.svg +++ b/apps/site/public/static/logos/nodejsLight.svg @@ -1 +1,39 @@ - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/site/public/static/logos/nodejsLightPride.svg b/apps/site/public/static/logos/nodejsLightPride.svg index 9de9a30fa9e23..45ca1e0961eee 100644 --- a/apps/site/public/static/logos/nodejsLightPride.svg +++ b/apps/site/public/static/logos/nodejsLightPride.svg @@ -1 +1,52 @@ - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/site/public/static/logos/nodejsStackedBlack.svg b/apps/site/public/static/logos/nodejsStackedBlack.svg index c43a76b399f14..5ba7bca7f4f58 100644 --- a/apps/site/public/static/logos/nodejsStackedBlack.svg +++ b/apps/site/public/static/logos/nodejsStackedBlack.svg @@ -1 +1,40 @@ - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/site/public/static/logos/nodejsStackedDark.svg b/apps/site/public/static/logos/nodejsStackedDark.svg index 9aac264b2d234..d0347ebcf2bd1 100644 --- a/apps/site/public/static/logos/nodejsStackedDark.svg +++ b/apps/site/public/static/logos/nodejsStackedDark.svg @@ -1 +1,44 @@ - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/site/public/static/logos/nodejsStackedLight.svg b/apps/site/public/static/logos/nodejsStackedLight.svg index d43e142149270..d10fc5cd9c28e 100644 --- a/apps/site/public/static/logos/nodejsStackedLight.svg +++ b/apps/site/public/static/logos/nodejsStackedLight.svg @@ -1 +1,44 @@ - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/site/public/static/logos/nodejsStackedWhite.svg b/apps/site/public/static/logos/nodejsStackedWhite.svg index dd9dbd25e24c4..d0161669ddfc5 100644 --- a/apps/site/public/static/logos/nodejsStackedWhite.svg +++ b/apps/site/public/static/logos/nodejsStackedWhite.svg @@ -1 +1,35 @@ - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/ui-components/__design__/node-logos.stories.tsx b/packages/ui-components/__design__/node-logos.stories.tsx index 543538c03f6cc..edf900253c87f 100644 --- a/packages/ui-components/__design__/node-logos.stories.tsx +++ b/packages/ui-components/__design__/node-logos.stories.tsx @@ -1,61 +1,19 @@ import type { Meta as MetaObj, StoryObj } from '@storybook/react'; -import { - JsGreen, - JsWhite, - Nodejs, - NodejsStackedBlack, - NodejsStackedDark, - NodejsStackedLight, - NodejsStackedWhite, -} from '#ui/Icons/Logos'; +import { JsWhite, Nodejs } from '#ui/Icons/Logos'; -export const HorizontalLogo: StoryObj = { - render: () => , -}; - -export const PrideLogo: StoryObj = { - render: () => , -}; - -export const StackedLogos: StoryObj = { +export const NodejsLogos: StoryObj = { render: () => ( -
-
- {[NodejsStackedDark, NodejsStackedBlack].map((Icon, index) => ( - - ))} - {[NodejsStackedLight, NodejsStackedWhite].map((Icon, index) => ( - - ))} -
-
- ), -}; - -export const JSSymbols: StoryObj = { - render: () => ( -
- {[JsWhite, JsGreen].map((Icon, index) => ( - +
+ {(['default', 'pride'] as const).map(variant => ( + ))} +
+ +
), + name: 'Node.js Logos', }; export default { title: 'Design System' } as MetaObj; diff --git a/packages/ui-components/src/Common/NodejsLogo/index.tsx b/packages/ui-components/src/Common/NodejsLogo/index.tsx index 21725e85d5ae0..daed6686dc145 100644 --- a/packages/ui-components/src/Common/NodejsLogo/index.tsx +++ b/packages/ui-components/src/Common/NodejsLogo/index.tsx @@ -1,26 +1,11 @@ import type { FC } from 'react'; -import NodejsIcon from '#ui/Icons/Logos/Nodejs'; -import type { LogoVariant } from '#ui/types'; +import NodejsIcon, { type NodeJsLogoProps } from '#ui/Icons/Logos/Nodejs'; import style from './index.module.css'; -type NodejsLogoProps = { - variant?: LogoVariant; - ariaLabel?: string; -}; - -const NodejsLogo: FC = ({ - variant = 'default', - ariaLabel, -}) => { - return ( - - ); +const NodejsLogo: FC = props => { + return ; }; export default NodejsLogo; diff --git a/packages/ui-components/src/Icons/Logos/JsGreen.tsx b/packages/ui-components/src/Icons/Logos/JsGreen.tsx deleted file mode 100644 index 7071553a28a67..0000000000000 --- a/packages/ui-components/src/Icons/Logos/JsGreen.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import type { FC, SVGProps } from 'react'; - -const JsGreenIcon: FC> = props => ( - - - - - - - - - - - -); - -export default JsGreenIcon; diff --git a/packages/ui-components/src/Icons/Logos/Nodejs.tsx b/packages/ui-components/src/Icons/Logos/Nodejs.tsx index 820c604fc0963..674525bab1f27 100644 --- a/packages/ui-components/src/Icons/Logos/Nodejs.tsx +++ b/packages/ui-components/src/Icons/Logos/Nodejs.tsx @@ -3,368 +3,153 @@ import type { FC, SVGProps } from 'react'; import type { LogoVariant } from '#ui/types'; -type NodeJsLogoProps = SVGProps & { +export type NodeJsLogoProps = SVGProps & { variant?: LogoVariant; - ariaLabel?: string; }; const NodejsIcon: FC = ({ className, variant = 'default', - ariaLabel = '', ...props }) => { return ( - + - + - - - - - {variant === 'pride' ? ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + {variant === 'pride' && ( + + + + + + + - - ) : ( - <> + )} + - - )} + + - - {variant === 'pride' ? ( - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + {variant === 'pride' && ( + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ) : ( - - - - - - - - - - - - - - - - - - - - - - )} + )} + ); }; diff --git a/packages/ui-components/src/Icons/Logos/NodejsStackedBlack.tsx b/packages/ui-components/src/Icons/Logos/NodejsStackedBlack.tsx deleted file mode 100644 index 51f41235594ad..0000000000000 --- a/packages/ui-components/src/Icons/Logos/NodejsStackedBlack.tsx +++ /dev/null @@ -1,98 +0,0 @@ -import type { FC, SVGProps } from 'react'; - -const NodejsStackedBlackIcon: FC> = props => ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -); - -export default NodejsStackedBlackIcon; diff --git a/packages/ui-components/src/Icons/Logos/NodejsStackedDark.tsx b/packages/ui-components/src/Icons/Logos/NodejsStackedDark.tsx deleted file mode 100644 index fdce4911e705b..0000000000000 --- a/packages/ui-components/src/Icons/Logos/NodejsStackedDark.tsx +++ /dev/null @@ -1,124 +0,0 @@ -import type { FC, SVGProps } from 'react'; - -const NodejsStackedDarkIcon: FC> = props => ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -); - -export default NodejsStackedDarkIcon; diff --git a/packages/ui-components/src/Icons/Logos/NodejsStackedLight.tsx b/packages/ui-components/src/Icons/Logos/NodejsStackedLight.tsx deleted file mode 100644 index 7c436610465dd..0000000000000 --- a/packages/ui-components/src/Icons/Logos/NodejsStackedLight.tsx +++ /dev/null @@ -1,123 +0,0 @@ -import type { FC, SVGProps } from 'react'; - -const NodejsStackedLightIcon: FC> = props => ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -); - -export default NodejsStackedLightIcon; diff --git a/packages/ui-components/src/Icons/Logos/NodejsStackedWhite.tsx b/packages/ui-components/src/Icons/Logos/NodejsStackedWhite.tsx deleted file mode 100644 index f88bb26ab8b2b..0000000000000 --- a/packages/ui-components/src/Icons/Logos/NodejsStackedWhite.tsx +++ /dev/null @@ -1,98 +0,0 @@ -import type { FC, SVGProps } from 'react'; - -const NodejsStackedWhiteIcon: FC> = props => ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -); - -export default NodejsStackedWhiteIcon; diff --git a/packages/ui-components/src/Icons/Logos/index.ts b/packages/ui-components/src/Icons/Logos/index.ts index d2762bf43e66e..551343ef14aea 100644 --- a/packages/ui-components/src/Icons/Logos/index.ts +++ b/packages/ui-components/src/Icons/Logos/index.ts @@ -1,17 +1,4 @@ -import JsGreen from '#ui/Icons/Logos/JsGreen'; import JsWhite from '#ui/Icons/Logos/JsWhite'; import Nodejs from '#ui/Icons/Logos/Nodejs'; -import NodejsStackedBlack from '#ui/Icons/Logos/NodejsStackedBlack'; -import NodejsStackedDark from '#ui/Icons/Logos/NodejsStackedDark'; -import NodejsStackedLight from '#ui/Icons/Logos/NodejsStackedLight'; -import NodejsStackedWhite from '#ui/Icons/Logos/NodejsStackedWhite'; -export { - JsGreen, - JsWhite, - Nodejs, - NodejsStackedBlack, - NodejsStackedDark, - NodejsStackedLight, - NodejsStackedWhite, -}; +export { JsWhite, Nodejs };