@node-core/ui-components 1.0.1-345c7d19144bec7138956e6ae7f5b20cfa2e2450 → 1.0.1-4ebead0c76b580d1bf722ebcd0f644e82dc06c0d

package/Containers/Sidebar/SidebarGroup/index.module.css

@@ -5,22 +5,60 @@
     w-full
     flex-col
     gap-2;
-}
 
-.groupName {
-  @apply px-2
-    py-1
-    text-xs
-    font-semibold
-    text-neutral-800
-    dark:text-neutral-600;
-}
+  &:not(.progression) {
+    .groupName {
+      @apply px-2
+        py-1
+        text-xs
+        font-semibold
+        text-neutral-800
+        dark:text-neutral-600;
+    }
+  }
 
-.itemList {
-  @apply m-0
-    flex
-    flex-col
-    items-start
-    gap-0.5
-    p-0;
+  &.progression {
+    @apply flex
+      flex-col
+      gap-4
+      text-sm
+      font-medium
+      text-neutral-800
+      dark:text-neutral-200;
+
+    .itemList {
+      @apply relative
+        -left-1
+        flex
+        flex-col
+        after:absolute
+        after:left-[0.45rem]
+        after:top-0
+        after:z-10
+        after:h-full
+        after:w-px
+        after:bg-neutral-200
+        after:content-['']
+        dark:after:bg-neutral-800;
+
+      a {
+        @apply first:before:absolute
+          first:before:bottom-[calc(50%+0.25rem)]
+          first:before:left-0
+          first:before:h-20
+          first:before:w-4
+          first:before:bg-white
+          first:before:content-['']
+          last:after:absolute
+          last:after:left-0
+          last:after:top-[calc(50%+0.25rem)]
+          last:after:h-20
+          last:after:w-4
+          last:after:bg-white
+          last:after:content-['']
+          first:dark:before:bg-neutral-950
+          last:dark:after:bg-neutral-950;
+      }
+    }
+  }
 }

package/Containers/Sidebar/SidebarGroup/index.tsx

@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import type { ComponentProps, FC } from 'react';
 
 import SidebarItem from '#ui/Containers/Sidebar/SidebarItem';
@@ -10,18 +11,36 @@ type SidebarGroupProps = {
   items: Array<Omit<ComponentProps<typeof SidebarItem>, 'as' | 'pathname'>>;
   as?: LinkLike;
   pathname?: string;
+  className: string;
+  showProgressionIcons?: boolean;
 };
 
 const SidebarGroup: FC<SidebarGroupProps> = ({
   groupName,
   items,
+  showProgressionIcons,
+  className,
   ...props
 }) => (
-  <section className={styles.group}>
+  <section
+    className={classNames(
+      {
+        [styles.group]: true,
+        [styles.progression]: showProgressionIcons,
+      },
+      className
+    )}
+  >
     <label className={styles.groupName}>{groupName}</label>
     <ul className={styles.itemList}>
       {items.map(({ label, link }) => (
-        <SidebarItem key={link} label={label} link={link} {...props} />
+        <SidebarItem
+          key={link}
+          label={label}
+          link={link}
+          showProgressionIcons={showProgressionIcons}
+          {...props}
+        />
       ))}
     </ul>
   </section>

package/Containers/Sidebar/SidebarItem/index.module.css

@@ -1,35 +1,56 @@
-@reference "../../../styles/index.css";
+@reference '../../../styles/index.css';
 
-.sideBarItem {
-  @apply flex
+.item {
+  @apply font-regular
+    relative
+    z-20
+    flex
     w-full
-    list-none
+    items-center
+    overflow-hidden
+    text-sm
     text-neutral-800
     dark:text-neutral-200;
 
-  a {
-    @apply inline-flex
-      items-center
-      gap-2
-      p-2;
-  }
-
   .label {
     @apply font-regular
-      w-full
+      p-2
       text-sm;
   }
 
+  .progressionIcon {
+    @apply shrink-0
+      fill-neutral-200
+      stroke-white
+      stroke-[4]
+      dark:fill-neutral-800
+      dark:stroke-neutral-950;
+  }
+
   .icon {
     @apply size-3
       text-neutral-500
       dark:text-neutral-200;
   }
-}
 
-.active {
-  @apply rounded-sm
-    bg-green-600
-    text-white
-    dark:text-white;
+  &.progression {
+    .label {
+      @apply p-1;
+    }
+  }
+
+  &.active {
+    @apply text-neutral-900
+      dark:text-white;
+
+    .progressionIcon {
+      @apply fill-green-500;
+    }
+
+    &:not(.progression) .label {
+      @apply rounded-sm
+        bg-green-600
+        text-white;
+    }
+  }
 }

package/Containers/Sidebar/SidebarItem/index.tsx

@@ -1,26 +1,43 @@
 import { ArrowUpRightIcon } from '@heroicons/react/24/solid';
+import classNames from 'classnames';
 import type { FC } from 'react';
 
-import ActiveLink from '#ui/Common/BaseActiveLink';
+import BaseActiveLink from '#ui/Common/BaseActiveLink';
 import type { FormattedMessage, LinkLike } from '#ui/types';
 
 import styles from './index.module.css';
+import ProgressionIcon from '../ProgressionIcon';
 
 type SidebarItemProps = {
   label: FormattedMessage;
   link: string;
   as?: LinkLike;
   pathname?: string;
+  showProgressionIcons?: boolean;
 };
 
-const SidebarItem: FC<SidebarItemProps> = ({ label, link, ...props }) => (
-  <li className={styles.sideBarItem}>
-    <ActiveLink href={link} activeClassName={styles.active} {...props}>
-      <span className={styles.label}>{label}</span>
+const SidebarItem: FC<SidebarItemProps> = ({
+  label,
+  link,
+  showProgressionIcons = false,
+  ...props
+}) => (
+  <BaseActiveLink
+    className={classNames({
+      [styles.item]: true,
+      [styles.progression]: showProgressionIcons,
+    })}
+    href={link}
+    activeClassName={styles.active}
+    {...props}
+  >
+    {showProgressionIcons && (
+      <ProgressionIcon className={styles.progressionIcon} />
+    )}
+    <span className={styles.label}>{label}</span>
 
-      {link.startsWith('http') && <ArrowUpRightIcon className={styles.icon} />}
-    </ActiveLink>
-  </li>
+    {/^https?:/.test(link) && <ArrowUpRightIcon className={styles.icon} />}
+  </BaseActiveLink>
 );
 
 export default SidebarItem;

package/Containers/Sidebar/index.module.css

@@ -4,26 +4,25 @@
   @apply flex
     w-full
     flex-col
-    items-start
     gap-8
     overflow-auto
-    overflow-x-hidden
-    border-r-neutral-200
+    border-r-0
+    border-neutral-200
     bg-white
     px-4
     py-6
     sm:border-r
     md:max-w-xs
     lg:px-6
-    dark:border-r-neutral-900
+    dark:border-neutral-900
     dark:bg-neutral-950;
 
-  > section {
+  .navigation {
     @apply hidden
       sm:flex;
   }
 
-  > span {
+  .mobileSelect {
     @apply flex
       w-full
       sm:hidden;

package/Containers/Sidebar/index.stories.tsx

@@ -5,80 +5,84 @@ import Sidebar from '#ui/Containers/Sidebar';
 type Story = StoryObj<typeof Sidebar>;
 type Meta = MetaObj<typeof Sidebar>;
 
-export const Default: Story = {
-  args: {
-    groups: [
-      {
-        groupName: 'About Node.js',
-        items: [
-          {
-            link: '/item1',
-            label: 'About Node.js',
-          },
-          {
-            link: '/item2',
-            label: 'Project Governance',
-          },
-          {
-            link: '/item3',
-            label: 'Releases',
-          },
-          {
-            link: '/item4',
-            label: 'Branding',
-          },
-          {
-            link: '/item5',
-            label: 'Privacy Policy',
-          },
-          {
-            link: '/item6',
-            label: 'Security Reporting',
-          },
-        ],
-      },
-      {
-        groupName: 'Get Involved',
-        items: [
-          {
-            link: '/item7',
-            label: 'Get Involved',
-          },
-          {
-            link: '/item8',
-            label: 'Collab Summit',
-          },
-          {
-            link: '/item9',
-            label: 'Contribute',
-          },
-          {
-            link: '/item10',
-            label: 'Code of Conduct',
-          },
-        ],
-      },
-      {
-        groupName: 'Download',
-        items: [
-          {
-            link: '/item11',
-            label: 'Download',
-          },
-          {
-            link: '/item12',
-            label: 'Package Manager',
-          },
-          {
-            link: '/item13',
-            label: 'Node.js Releases',
-          },
-        ],
-      },
-    ],
-    title: 'Sidebar',
-    onSelect: console.log,
-  },
+const args = {
+  groups: [
+    {
+      groupName: 'About Node.js',
+      items: [
+        {
+          link: '/item1',
+          label: 'About Node.js',
+        },
+        {
+          link: '/item2',
+          label: 'Project Governance',
+        },
+        {
+          link: '/item3',
+          label: 'Releases',
+        },
+        {
+          link: '/item4',
+          label: 'Branding',
+        },
+        {
+          link: '/item5',
+          label: 'Privacy Policy',
+        },
+        {
+          link: '/item6',
+          label: 'Security Reporting',
+        },
+      ],
+    },
+    {
+      groupName: 'Get Involved',
+      items: [
+        {
+          link: '/item7',
+          label: 'Get Involved',
+        },
+        {
+          link: '/item8',
+          label: 'Collab Summit',
+        },
+        {
+          link: '/item9',
+          label: 'Contribute',
+        },
+        {
+          link: '/item10',
+          label: 'Code of Conduct',
+        },
+      ],
+    },
+    {
+      groupName: 'Download',
+      items: [
+        {
+          link: '/item11',
+          label: 'Download',
+        },
+        {
+          link: '/item12',
+          label: 'Package Manager',
+        },
+        {
+          link: '/item13',
+          label: 'Node.js Releases',
+        },
+      ],
+    },
+  ],
+  title: 'Sidebar',
+  onSelect: console.log,
+  pathname: '/item1',
+};
+
+export const Default: Story = { args };
+export const Progression: Story = {
+  args: { ...args, showProgressionIcons: true },
 };
 
 export default { component: Sidebar } as Meta;

package/Containers/Sidebar/index.tsx

@@ -1,4 +1,4 @@
-import type { ComponentProps, FC } from 'react';
+import type { ComponentProps, FC, PropsWithChildren } from 'react';
 
 import Select from '#ui/Common/Select';
 import SidebarGroup from '#ui/Containers/Sidebar/SidebarGroup';
@@ -7,19 +7,26 @@ import type { LinkLike } from '#ui/types';
 import styles from './index.module.css';
 
 type SidebarProps = {
-  groups: Array<Omit<ComponentProps<typeof SidebarGroup>, 'as' | 'pathname'>>;
+  groups: Array<
+    Pick<ComponentProps<typeof SidebarGroup>, 'items' | 'groupName'>
+  >;
   pathname?: string;
   title: string;
   onSelect: (value: string) => void;
   as?: LinkLike;
+  showProgressionIcons?: boolean;
+  placeholder?: string;
 };
 
-const SideBar: FC<SidebarProps> = ({
+const SideBar: FC<PropsWithChildren<SidebarProps>> = ({
   groups,
   pathname,
   title,
   onSelect,
   as,
+  showProgressionIcons = false,
+  children,
+  placeholder,
 }) => {
   const selectItems = groups.map(({ items, groupName }) => ({
     label: groupName,
@@ -27,18 +34,21 @@ const SideBar: FC<SidebarProps> = ({
   }));
 
   const currentItem = selectItems
-    .map(item => item.items)
-    .flat()
+    .flatMap(item => item.items)
     .find(item => pathname === item.value);
 
   return (
     <aside className={styles.wrapper}>
+      {children}
+
       {selectItems.length > 0 && (
         <Select
           label={title}
           values={selectItems}
           defaultValue={currentItem?.value}
+          placeholder={placeholder}
           onChange={onSelect}
+          className={styles.mobileSelect}
         />
       )}
 
@@ -49,6 +59,8 @@ const SideBar: FC<SidebarProps> = ({
           items={items}
           pathname={pathname}
           as={as}
+          showProgressionIcons={showProgressionIcons}
+          className={styles.navigation}
         />
       ))}
     </aside>