feat: apply toc changes from stoplightio/platform-internal#2425 (#157)

stoplightio · May 13, 2020 · d231628 · d231628
1 parent ef07d10
commit d231628
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 6 deletions.
diff --git a/src/TableOfContents/index.tsx b/src/TableOfContents/index.tsx
@@ -17,6 +17,7 @@ export type TableOfContentsItem = {
   type?: 'divider' | 'group' | 'item';
   icon?: FAIconProp;
   activeIcon?: FAIconProp;
+  iconColor?: string;
   isLoading?: boolean;
   isDisabled?: boolean;
   showSkeleton?: boolean;
@@ -256,7 +257,7 @@ const computeTableOfContentsItemProps = ({
       'TableOfContentsItem--child border-gray-3 dark:border-lighten-3': isChild,
     }),
     style: {
-      marginLeft: depth * 15,
+      marginLeft: depth * 24,
     },
   };
 };
@@ -308,8 +309,8 @@ const TableOfContentsItemInner = ({
       'text-gray-7 dark:text-white': isActive,
       'border-primary text-blue-6': isSelected,
 
-      'text-gray-6 dark:text-gray-6 tracking-wide text-sm font-semibold h-12': isDivider,
-      'text-gray-6 dark:text-gray-5': !isDivider && !isSelected && !isActive,
+      'text-gray-6 dark:text-gray-6 font-semibold h-10': isDivider,
+      'text-gray-5 dark:text-gray-5 hover:text-gray-6': !isDivider && !isSelected && !isActive,
     },
   );
 
@@ -356,7 +357,7 @@ const TableOfContentsItemInner = ({
         {loadingElem}
         {actionElem}
         {isGroup && (
-          <FAIcon className="TableOfContentsItem__icon" icon={isExpanded ? 'chevron-down' : 'chevron-right'} />
+          <FAIcon className="TableOfContentsItem__icon" icon={['far', isExpanded ? 'chevron-down' : 'chevron-right']} />
         )}
       </div>
       {item.footer}

diff --git a/src/styles/components/TableOfContents/_base.scss b/src/styles/components/TableOfContents/_base.scss
@@ -9,7 +9,7 @@
   }
 
   &__inner {
-    padding: 6px 12px 6px;
+    padding: 6px 22px 6px;
     margin-top: 1px;
     margin-bottom: 1px;
   }
@@ -26,18 +26,25 @@
     }
   }
 
+  &--child {
+    .TableOfContentsItem__inner {
+      padding-left: 15px;
+    }
+  }
+
   &--divider {
     &:first-child {
       margin-top: -5px;
     }
 
     &:not(:first-child) {
-      margin-top: 5px;
+      margin-top: 12px;
     }
 
     .TableOfContentsItem__name {
       line-height: 1.2;
       text-transform: uppercase;
+      font-size: 12px;
     }
   }
 }