fix: fix second-level heading in description

Redocly · Mar 21, 2018 · a084532 · a084532
1 parent 8662176
commit a084532
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 16 deletions.
diff --git a/src/components/Markdown/styles.ts b/src/components/Markdown/styles.ts
@@ -22,6 +22,11 @@ export const markdownCss = css`
     margin-top: 0;
   }
 
+  h2 {
+    ${headerCommonMixin(2)};
+    color: ${props => props.theme.colors.text};
+  }
+
   code {
     color: #e53935;
     background-color: rgba(38, 50, 56, 0.04);

diff --git a/src/components/SideMenu/MenuItem.tsx b/src/components/SideMenu/MenuItem.tsx
@@ -44,15 +44,15 @@ export class MenuItem extends React.Component<MenuItemProps> {
         {item.type === 'operation' ? (
           <OperationMenuItemContent item={item as OperationModel} />
         ) : (
-          <MenuItemLabel depth={item.depth} active={item.active}>
-            <MenuItemTitle title={item.name}>{item.name}</MenuItemTitle>
-            {(item.depth > 0 &&
-              item.items.length > 0 && (
-                <ShelfIcon float={'right'} direction={item.active ? 'down' : 'right'} />
-              )) ||
-              null}
-          </MenuItemLabel>
-        )}
+            <MenuItemLabel depth={item.depth} active={item.active} type={item.type}>
+              <MenuItemTitle title={item.name}>{item.name}</MenuItemTitle>
+              {(item.depth > 0 &&
+                item.items.length > 0 && (
+                  <ShelfIcon float={'right'} direction={item.active ? 'down' : 'right'} />
+                )) ||
+                null}
+            </MenuItemLabel>
+          )}
         {!withoutChildren &&
           item.items &&
           item.items.length > 0 && (

diff --git a/src/components/SideMenu/styled.elements.ts b/src/components/SideMenu/styled.elements.ts
@@ -5,7 +5,7 @@ import styled, { css, withProps } from '../../styled-components';
 
 export const OperationBadge = withProps<{ type: string }>(styled.span).attrs({
   className: props => `operation-type ${props.type}`,
-})`
+}) `
   width: 26px;
   display: inline-block;
   height: ${props => props.theme.code.fontSize};;
@@ -70,7 +70,7 @@ function menuItemActiveBg(depth): string {
   }
 }
 
-export const MenuItemUl = withProps<{ active: boolean }>(styled.ul)`
+export const MenuItemUl = withProps<{ active: boolean }>(styled.ul) `
   margin: 0;
   padding: 0;
 
@@ -81,7 +81,7 @@ export const MenuItemUl = withProps<{ active: boolean }>(styled.ul)`
   ${props => (props.active ? '' : 'display: none;')};
 `;
 
-export const MenuItemLi = withProps<{ depth: number }>(styled.li)`
+export const MenuItemLi = withProps<{ depth: number }>(styled.li) `
   list-style: none inside none;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -114,17 +114,19 @@ export const MenuItemLabel = withProps<{
   depth: number;
   active: boolean;
   deprecated?: boolean;
+  type?: string;
 }>(styled.label).attrs({
   role: 'menuitem',
   className: props =>
     classnames('-depth' + props.depth, {
       active: props.active,
     }),
-})`
+}) `
   cursor: pointer;
   color: ${props => (props.active ? props.theme.colors.main : props.theme.colors.text)};
   margin: 0;
   padding: 12.5px ${props => props.theme.spacingUnit}px;
+  ${({ depth, type, theme }) => type === 'section' && depth > 1 && 'padding-left: ' + theme.spacingUnit * 2 + 'px;' || ''}
   display: flex;
   justify-content: space-between;
   font-family: ${props => props.theme.headingsFont.family};
@@ -138,7 +140,7 @@ export const MenuItemLabel = withProps<{
   }
 `;
 
-export const MenuItemTitle = withProps<{ width?: string }>(styled.span)`
+export const MenuItemTitle = withProps<{ width?: string }>(styled.span) `
   display: inline-block;
   vertical-align: middle;
   width: ${props => (props.width ? props.width : 'auto')};

diff --git a/src/services/MenuBuilder.ts b/src/services/MenuBuilder.ts
@@ -62,7 +62,7 @@ export class MenuBuilder {
         const group = new GroupModel('section', heading, parent);
         group.depth = depth;
         if (heading.items) {
-          group.items = mapHeadingsDeep(group, group.items, depth + 1);
+          group.items = mapHeadingsDeep(group, heading.items, depth + 1);
         }
         return group;
       });

diff --git a/src/services/__tests__/MarkdownRenderer.test.ts b/src/services/__tests__/MarkdownRenderer.test.ts
@@ -11,8 +11,9 @@ describe('Markdown renderer', () => {
     expect(Object.keys(renderer.headings)).toHaveLength(1);
     expect(renderer.headings[0].name).toEqual('Sub Intro');
   });
+
   test('should return a level-2 heading as a child of level-1', () => {
-    const headings = renderer.extractHeadings('# Introduction \n ## Sub Intro', false);
+    const headings = renderer.extractHeadings('# Introduction \n ## Sub Intro');
     expect(headings).toHaveLength(1);
     expect(headings[0].name).toEqual('Introduction');
     expect(headings[0].items).toBeDefined();