feat: standardize sidebars (#8377)

* feat: standardize sidebars

removes progress icon variant to unify all sidebar experiences, and no longer suggest linear flow, which we received as feedback multiple times during collaboration summit

* address review feedback

formatting

Author: bmuenzenmeyer

apps/site/components/withSidebar.tsx

@@ -16,7 +16,6 @@ import type { FC } from 'react';
 type WithSidebarProps = {
   navKeys: Array<NavigationKeys>;
   context?: Record<string, RichTranslationValues>;
-  showProgressionIcons?: boolean;
 };
 
 const WithSidebar: FC<WithSidebarProps> = ({ navKeys, context, ...props }) => {

apps/site/layouts/Learn.tsx

@@ -14,7 +14,7 @@ const LearnLayout: FC<PropsWithChildren> = ({ children }) => (
     <WithNavBar />
 
     <Article>
-      <WithSideBar navKeys={['learn']} showProgressionIcons={true} />
+      <WithSideBar navKeys={['learn']} />
 
       <div>
         <main>

packages/ui-components/src/Containers/Sidebar/ProgressionIcon/index.tsx

@@ -6,67 +6,19 @@
     flex-col
     gap-2;
 
-  /* Default item list spacing for non-progression groups */
+  /* Default item list spacing for groups */
   .itemList {
     @apply flex
       flex-col
       gap-1;
   }
 
-  &:not(.progression) {
-    .groupName {
-      @apply px-2
-        py-1
-        text-xs
-        font-semibold
-        text-neutral-800
-        dark:text-neutral-600;
-    }
-  }
-
-  &.progression {
-    @apply flex
-      flex-col
-      gap-4
-      text-sm
-      font-medium
+  .groupName {
+    @apply px-2
+      py-1
+      text-xs
+      font-semibold
       text-neutral-800
-      dark:text-neutral-200;
-
-    .itemList {
-      @apply relative
-        -left-1
-        flex
-        flex-col
-        gap-px
-        after:absolute
-        after:top-0
-        after:left-[0.45rem]
-        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:top-[calc(50%+0.25rem)]
-          last:after:left-0
-          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;
-      }
-    }
+      dark:text-neutral-600;
   }
 }

packages/ui-components/src/Containers/Sidebar/SidebarGroup/index.module.css

@@ -13,35 +13,19 @@ type SidebarGroupProps = {
   as?: LinkLike;
   pathname?: string;
   className: string;
-  showProgressionIcons?: boolean;
 };
 
 const SidebarGroup: FC<SidebarGroupProps> = ({
   groupName,
   items,
-  showProgressionIcons,
   className,
   ...props
 }) => (
-  <section
-    className={classNames(
-      {
-        [styles.group]: true,
-        [styles.progression]: showProgressionIcons,
-      },
-      className
-    )}
-  >
+  <section className={classNames(styles.group, className)}>
     <label className={styles.groupName}>{groupName}</label>
     <ul className={styles.itemList}>
       {items.map(({ label, link }) => (
-        <SidebarItem
-          key={link}
-          label={label}
-          link={link}
-          showProgressionIcons={showProgressionIcons}
-          {...props}
-        />
+        <SidebarItem key={link} label={label} link={link} {...props} />
       ))}
     </ul>
   </section>

packages/ui-components/src/Containers/Sidebar/SidebarGroup/index.tsx

@@ -29,31 +29,7 @@
       dark:text-neutral-200;
   }
 
-  &.progression {
-    &.active {
-      @apply text-neutral-900
-        dark:text-white;
-
-      .hexagonIcon {
-        @apply fill-green-500;
-      }
-    }
-
-    .label {
-      @apply p-1;
-    }
-
-    .hexagonIcon {
-      @apply shrink-0
-        fill-neutral-200
-        stroke-white
-        stroke-[4]
-        dark:fill-neutral-800
-        dark:stroke-neutral-950;
-    }
-  }
-
-  &:not(.active):not(.progression):hover {
+  &:not(.active):hover {
     /* Apply hover background to the full item width */
     @apply bg-neutral-100
       dark:bg-neutral-900;
@@ -71,7 +47,7 @@
     }
   }
 
-  &.active:not(.progression) {
+  &.active {
     /* Full-width active background and readable text */
     @apply bg-green-600
       text-white;

packages/ui-components/src/Containers/Sidebar/SidebarItem/index.module.css

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

packages/ui-components/src/Containers/Sidebar/SidebarItem/index.tsx

@@ -81,8 +81,5 @@ const args = {
 };
 
 export const Default: Story = { args };
-export const Progression: Story = {
-  args: { ...args, showProgressionIcons: true },
-};
 
 export default { component: Sidebar } as Meta;

packages/ui-components/src/Containers/Sidebar/index.stories.tsx

@@ -14,7 +14,6 @@ type SidebarProps = {
   title: string;
   onSelect: (value: string) => void;
   as?: LinkLike;
-  showProgressionIcons?: boolean;
   placeholder?: string;
 };
 
@@ -24,7 +23,6 @@ const SideBar: FC<PropsWithChildren<SidebarProps>> = ({
   title,
   onSelect,
   as,
-  showProgressionIcons = false,
   children,
   placeholder,
 }) => {
@@ -60,7 +58,6 @@ const SideBar: FC<PropsWithChildren<SidebarProps>> = ({
           items={items}
           pathname={pathname}
           as={as}
-          showProgressionIcons={showProgressionIcons}
           className={styles.navigation}
         />
       ))}