feat: adjust styles to match figmas and moved icons as react componen…

…ts (#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
nodejs · Nov 27, 2023 · a7b2ca3 · a7b2ca3
1 parent ee29500
commit a7b2ca3
Show file tree

Hide file tree

Showing 71 changed files with 1,162 additions and 441 deletions.
diff --git a/.storybook/main.ts b/.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')],
   }),
 };
 

diff --git a/.stylelintrc.mjs b/.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,

diff --git a/components/Common/AvatarGroup/Avatar/index.stories.tsx b/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',
   },
 };

diff --git a/components/Common/Banner/index.module.css b/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;
   }
 }
 

diff --git a/components/Common/Banner/index.stories.tsx b/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;
diff --git a/components/Common/Breadcrumbs/BreadcrumbItem/index.module.css b/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;
   }

diff --git a/components/Common/MetaBar/index.stories.tsx b/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>
         </>
       ),

diff --git a/components/Common/Pagination/Ellipsis/index.module.css b/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;
 }
diff --git a/components/Common/Preview/index.tsx b/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>

diff --git a/components/Common/Select/index.stories.tsx b/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',

diff --git a/components/Common/Select/index.tsx b/components/Common/Select/index.tsx
@@ -1,7 +1,6 @@
 import { ChevronDownIcon } from '@heroicons/react/24/outline';
 import * as Primitive from '@radix-ui/react-select';
 import classNames from 'classnames';
-import Image from 'next/image';
 import { useId, useMemo } from 'react';
 import type { FC } from 'react';
 
@@ -10,7 +9,7 @@ import styles from './index.module.css';
 type SelectValue = {
   label: string;
   value: string;
-  iconImageUrl?: string;
+  iconImage?: React.ReactNode;
 };
 
 type SelectProps = {
@@ -72,21 +71,14 @@ const Select: FC<SelectProps> = ({
                     {dropdownLabel}
                   </Primitive.Label>
                 )}
-                {mappedValues.map(({ value, label, iconImageUrl }) => (
+                {mappedValues.map(({ value, label, iconImage }) => (
                   <Primitive.Item
                     key={value}
                     value={value}
                     className={`${styles.item} ${styles.text}`}
                   >
                     <Primitive.ItemText>
-                      {iconImageUrl && (
-                        <Image
-                          src={iconImageUrl}
-                          alt={label}
-                          width={16}
-                          height={16}
-                        />
-                      )}
+                      {iconImage}
                       {label}
                     </Primitive.ItemText>
                   </Primitive.Item>

diff --git a/components/Containers/Footer/index.module.css b/components/Containers/Footer/index.module.css
@@ -36,14 +36,4 @@
         gap-1;
     }
   }
-
-  .darkImage {
-    @apply hidden
-      dark:block;
-  }
-
-  .lightImage {
-    @apply block
-      dark:hidden;
-  }
 }
diff --git a/components/Containers/Footer/index.tsx b/components/Containers/Footer/index.tsx
@@ -1,13 +1,24 @@
-import classNames from 'classnames';
-import Image from 'next/image';
 import { useTranslations } from 'next-intl';
-import type { FC } from 'react';
+import type { FC, SVGProps } from 'react';
 
 import NavItem from '@/components/Containers/NavItem';
+import GitHub from '@/components/Icons/Social/GitHub';
+import LinkedIn from '@/components/Icons/Social/LinkedIn';
+import Mastodon from '@/components/Icons/Social/Mastodon';
+import Slack from '@/components/Icons/Social/Slack';
+import Twitter from '@/components/Icons/Social/Twitter';
 import { siteConfig } from '@/next.json.mjs';
 
 import styles from './index.module.css';
 
+const footerSocialIcons: Record<string, React.FC<SVGProps<SVGSVGElement>>> = {
+  github: GitHub,
+  mastodon: Mastodon,
+  twitter: Twitter,
+  slack: Slack,
+  linkedin: LinkedIn,
+};
+
 const Footer: FC = () => {
   const t = useTranslations();
 
@@ -22,30 +33,19 @@ const Footer: FC = () => {
           </NavItem>
         ))}
       </div>
+
       <div className={styles.sectionSecondary}>
         <NavItem type="footer" href={openJSlink.link}>
           &copy; {t(openJSlink.text)}
         </NavItem>
+
         <div className={styles.social}>
           {siteConfig.socialLinks.map(link => {
-            const navClass = classNames({
-              [styles.darkImage]: link.kind === 'dark',
-              [styles.lightImage]: link.kind === 'light',
-            });
+            const SocialIcon = footerSocialIcons[link.icon];
 
             return (
-              <NavItem
-                className={navClass}
-                key={link.icon}
-                href={link.link}
-                type="footer"
-              >
-                <Image
-                  src={link.icon}
-                  alt={link.alt || 'social'}
-                  width={20}
-                  height={20}
-                />
+              <NavItem key={link.icon} href={link.link} type="footer">
+                <SocialIcon width={20} height={20} />
               </NavItem>
             );
           })}

diff --git a/components/Containers/NavigationBar/index.stories.tsx b/components/Containers/NavigationBar/index.stories.tsx
@@ -10,7 +10,7 @@ export const Default: Story = {
     navItems: [
       {
         text: 'Learn',
-        href: '/learn',
+        href: '/',
       },
       {
         text: 'About',

diff --git a/components/Containers/NavigationBar/index.tsx b/components/Containers/NavigationBar/index.tsx
@@ -9,9 +9,9 @@ import type { FC, ComponentProps } from 'react';
 import LanguageDropdown from '@/components/Common/LanguageDropDown';
 import ThemeToggle from '@/components/Common/ThemeToggle';
 import NavItem from '@/components/Containers/NavItem';
-import GithubLogo from '@/components/Icons/GitHubLogo';
-import NodejsLogoDark from '@/components/Icons/NodejsLogoDark';
-import NodejsLogoLight from '@/components/Icons/NodejsLogoLight';
+import NodejsDark from '@/components/Icons/Logos/NodejsDark';
+import NodejsLight from '@/components/Icons/Logos/NodejsLight';
+import GitHub from '@/components/Icons/Social/GitHub';
 
 import style from './index.module.css';
 
@@ -38,8 +38,8 @@ const NavigationBar: FC<NavbarProps> = ({
     <nav className={`${style.container}`}>
       <div className={style.nodeIconAndMobileItemsToggler}>
         <div className={style.nodeIconWrapper}>
-          <NodejsLogoDark className={style.nodejsLogoDark} />
-          <NodejsLogoLight className={style.nodejsLogoLight} />
+          <NodejsDark className={style.nodejsLogoDark} />
+          <NodejsLight className={style.nodejsLogoLight} />
         </div>
         <Label.Root
           onClick={() => setIsMenuOpen(prev => !prev)}
@@ -69,7 +69,7 @@ const NavigationBar: FC<NavbarProps> = ({
             href="https://github.com/nodejs/node"
             aria-label="Node.js Github"
           >
-            <GithubLogo />
+            <GitHub />
           </a>
         </div>
       </div>

diff --git a/components/Containers/ProgressionSidebar/ProgressionSidebarGroup/index.module.css b/components/Containers/ProgressionSidebar/ProgressionSidebarGroup/index.module.css
@@ -16,7 +16,7 @@
 
     &::after {
       @apply absolute
-        left-[calc(0.5rem-0.5px)]
+        left-[0.45rem]
         top-0
         z-10
         h-full