feat: adjust styles to match figmas and moved icons as react components (#6143)

* feat: made all icons as react components

* chore: removed original svg images of the now react components

* fix: fixed storybooks, styles, icons and isolated markdown styles

* fix: more style fixes

* fix: fixed more styles

* fix: flex-grow-shink for breadcrumbs

* meta: some doc improvements for storybook

Author: ovflowd

.storybook/main.ts

@@ -34,9 +34,15 @@ const config: StorybookConfig = {
   framework: { name: '@storybook/nextjs', options: {} },
   webpack: async config => ({
     ...config,
+    // We want to conform as much as possible with our target settings
     target: 'browserslist',
+    // Performance Hints do not make sense on Storybook as it is bloated by design
     performance: { hints: false },
+    // `nodevu` is a Node.js-specific package that requires Node.js modules
+    // this is incompatible with Storybook. So we just mock the module
     resolve: { ...config.resolve, alias: { '@nodevu/core': false } },
+    // Removes Pesky Critical Dependency Warnings due to `next/font`
+    ignoreWarnings: [e => e.message.includes('Critical dep')],
   }),
 };
 

.stylelintrc.mjs

@@ -27,7 +27,13 @@ export default {
     'selector-class-pattern': ONLY_ALLOW_CAMEL_CASE_SELECTORS,
     // Enforces Element IDs to be camelCase
     'selector-id-pattern': ONLY_ALLOW_CAMEL_CASE_SELECTORS,
+    // Allow Tailwind-based CSS Rules
     'at-rule-no-unknown': [true, { ignoreAtRules: CUSTOM_AT_RULES }],
+    // Allow the Global CSS Selector
+    'selector-pseudo-class-no-unknown': [
+      true,
+      { ignorePseudoClasses: ['global'] },
+    ],
     // Enforces the order of the CSS properties to be in alphabetical order
     'order/properties-alphabetical-order': true,
     'no-descending-specificity': null,

components/Common/AvatarGroup/Avatar/index.stories.tsx

@@ -15,7 +15,7 @@ export const Default: Story = {
 
 export const NoSquare: Story = {
   args: {
-    src: '/static/images/logos/stacked-dark.svg',
+    src: '/static/images/logos/nodejs.png',
     alt: 'SD',
   },
 };

components/Common/Banner/index.module.css

@@ -17,12 +17,14 @@
 
   a {
     @apply w-fit
-      underline;
+      underline
+      decoration-white-opaque;
   }
 
   svg {
     @apply h-4
-      w-4;
+      w-4
+      text-white-opaque;
   }
 }
 

components/Common/Banner/index.stories.tsx

@@ -7,40 +7,33 @@ type Meta = MetaObj<typeof Banner>;
 
 export const Default: Story = {
   args: {
-    text: 'Nodejs collaborator summitNode.js Collaborator Summit 2023 - Bilbao, Spain (OpenJS World EU) 2023',
+    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
     type: 'default',
     url: 'https://github.com/openjs-foundation/summit/issues/360',
   },
 };
 
 export const Error: Story = {
   args: {
-    text: 'STOP creating issue for error 500 on download',
+    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
     type: 'error',
     url: 'https://github.com/nodejs/nodejs.org/issues/4495',
   },
 };
 
 export const Warning: Story = {
   args: {
-    text: 'STOP creating issue for error 500 on download',
+    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
     type: 'warning',
     url: 'https://github.com/nodejs/nodejs.org/issues/4495',
   },
 };
 
 export const NoLink: Story = {
   args: {
-    text: 'Claudio is the best maintainer',
+    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
     type: 'default',
   },
 };
 
-export const NoType: Story = {
-  args: {
-    text: 'Claudio is the best maintainer',
-    url: 'https://github.com/ovflowd',
-  },
-};
-
 export default { component: Banner } as Meta;

components/Common/Breadcrumbs/BreadcrumbItem/index.module.css

@@ -5,6 +5,11 @@
     text-sm
     font-medium;
 
+  a {
+    @apply flex-shrink
+      flex-grow;
+  }
+
   &,
   > a,
   > a:hover {
@@ -19,6 +24,8 @@
   .separator {
     @apply h-4
       w-4
+      flex-shrink-0
+      flex-grow
       text-neutral-600
       dark:text-neutral-400;
   }

components/Common/MetaBar/index.stories.tsx

@@ -1,9 +1,9 @@
 import { CodeBracketIcon } from '@heroicons/react/24/outline';
 import type { Meta as MetaObj, StoryObj } from '@storybook/react';
-import Image from 'next/image';
 
 import AvatarGroup from '@/components/Common/AvatarGroup';
 import MetaBar from '@/components/Common/MetaBar';
+import GitHub from '@/components/Icons/Social/GitHub';
 import Link from '@/components/Link';
 
 type Story = StoryObj<typeof MetaBar>;
@@ -38,20 +38,7 @@ export const Default: Story = {
       ),
       'components.metabar.contribute': (
         <>
-          <Image
-            src="/static/images/logos/social-github-dark.svg"
-            alt="GitHub Logo"
-            width={16}
-            height={16}
-            data-on-light
-          />
-          <Image
-            src="/static/images/logos/social-github.svg"
-            alt="GitHub Logo"
-            width={16}
-            height={16}
-            data-on-dark
-          />
+          <GitHub className="fill-neutral-700 dark:fill-neutral-100" />
           <Link href="/contribute">Edit this page</Link>
         </>
       ),

components/Common/Pagination/Ellipsis/index.module.css

@@ -2,6 +2,7 @@
   @apply w-10
     px-3
     py-2.5
+    leading-none
     text-neutral-800
     dark:text-neutral-200;
 }

components/Common/Preview/index.tsx

@@ -1,8 +1,7 @@
 import classNames from 'classnames';
-import Image from 'next/image';
 import type { CSSProperties, ComponentProps, FC, ReactNode } from 'react';
 
-import { BASE_PATH } from '@/next.constants.mjs';
+import JsIconWhite from '@/components/Icons/Logos/JsIconWhite';
 
 import styles from './index.module.css';
 
@@ -26,14 +25,7 @@ const Preview: FC<PreviewProps> = ({
     className={classNames(styles.root, styles[type], props.className)}
   >
     <div className={styles.container}>
-      <Image
-        className={styles.logo}
-        priority
-        width="71"
-        height="80"
-        src={`${BASE_PATH}/static/images/logos/js-white.svg`}
-        alt="Node.js"
-      />
+      <JsIconWhite className={styles.logo} width={71} height={80} />
       <h2>{title}</h2>
     </div>
   </div>

components/Common/Select/index.stories.tsx

@@ -1,6 +1,9 @@
 import type { Meta as MetaObj, StoryObj } from '@storybook/react';
 
 import Select from '@/components/Common/Select';
+import Apple from '@/components/Icons/Platform/Apple';
+import Linux from '@/components/Icons/Platform/Linux';
+import Microsoft from '@/components/Icons/Platform/Microsoft';
 
 type Story = StoryObj<typeof Select>;
 type Meta = MetaObj<typeof Select>;
@@ -68,17 +71,17 @@ export const InlineSelect: Story = {
       {
         value: 'linux',
         label: 'Linux',
-        iconImageUrl: '/static/images/logos/platform-linux.svg',
+        iconImage: <Linux width={16} height={16} />,
       },
       {
         value: 'macos',
         label: 'MacOS',
-        iconImageUrl: '/static/images/logos/platform-apple.svg',
+        iconImage: <Apple width={16} height={16} />,
       },
       {
         value: 'windows',
         label: 'Windows',
-        iconImageUrl: '/static/images/logos/platform-microsoft.svg',
+        iconImage: <Microsoft width={16} height={16} />,
       },
     ],
     dropdownLabel: 'Platform',