@redocly/theme 0.1.8 → 0.1.11

package/src/TableOfContent/TableOfContent.stories.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { ThemeProvider } from 'styled-components';
+
+import { TableOfContent } from '@theme/TableOfContent';
+import { generateMediaQueries } from '@theme/utils/media-css';
+
+const breakpoints = { small: '1rem', medium: '1rem', large: '1rem' };
+
+const theme = {
+  mediaQueries: generateMediaQueries(breakpoints),
+};
+
+export default {
+  title: 'Portal/TableOfContent',
+  component: TableOfContent,
+  decorators: [
+    (Story) => (
+      <ThemeProvider theme={theme}>
+        <Story />
+      </ThemeProvider>
+    ),
+  ],
+} as ComponentMeta<typeof TableOfContent>;
+
+const Template: ComponentStory<typeof TableOfContent> = (args) => <TableOfContent {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  headings: [
+    { id: '1', value: 'test 1', depth: 1 },
+    { id: '2', value: 'test 2', depth: 2 },
+    { id: '3', value: 'test 3', depth: 3 },
+    { id: '4', value: 'test 4', depth: 3 },
+    { id: '5', value: 'test 5', depth: 2 },
+  ],
+};

package/src/TableOfContent/TableOfContent.tsx

@@ -11,14 +11,14 @@ interface TableOfContentProps {
   tocMaxDepth: number;
 }
 
-export default function TableOfContent(props: TableOfContentProps): JSX.Element | null {
-  const { headings, tocMaxDepth } = props;
+export function TableOfContent(props: TableOfContentProps): JSX.Element | null {
+  const { headings, tocMaxDepth, contentWrapper } = props;
 
   const sidebar = useRef<HTMLDivElement | null>(null);
   useFullHeight(sidebar);
-  const activeHeadingId = useActiveHeading(props.contentWrapper);
+  const activeHeadingId = useActiveHeading(contentWrapper);
 
-  if (headings && headings.length === 1 && headings[0]?.depth === 1) {
+  if (headings && headings.length === 1 && (!headings[0] || headings[0].depth === 1)) {
     return null;
   }
   if (!headings?.length) {
@@ -46,8 +46,8 @@ export default function TableOfContent(props: TableOfContentProps): JSX.Element
               return (
                 <MenuItem
                   key={href}
-                  depth={heading.depth || 0}
                   href={href}
+                  depth={heading.depth || 0}
                   className={activeHeadingId === heading.id ? 'active' : ''}
                   dangerouslySetInnerHTML={{ __html: heading.value || '' }}
                   data-cy={`toc-${heading.value}`}
@@ -70,7 +70,7 @@ const TocHeader = styled.div`
 
 const MenuItem = styled.a<{ depth: number }>`
   display: block;
-  color: var(--color-text-main);
+  color: var(--color-content);
   cursor: pointer;
   font-size: 0.8em;
   padding: 10px 15px;
@@ -78,12 +78,14 @@ const MenuItem = styled.a<{ depth: number }>`
   transition: background-color 0.3s, color 0.3s;
   text-decoration: none;
   word-break: break-word;
-  font-family: var(--font-family-h);
+  font-family: var(--h-font-family);
+
   :hover,
   &.active {
-    color: var(--sidebar-text-active-color);
-    background-color: var(--sidebar-text-active-background-color);
+    color: var(--sidebar-item-active-color);
+    background-color: var(--sidebar-item-active-background-color);
   }
+
   :empty {
     padding: 0;
   }
@@ -94,7 +96,7 @@ const TableOfContentMenu = styled.aside`
   background-color: transparent;
   flex-shrink: 0;
   display: none !important;
-  font-family: var(--font-family-primary);
+  font-family: var(--font-family-base);
 
   ${({ theme }) => theme.mediaQueries.medium} {
     width: var(--toc-width);
@@ -106,7 +108,7 @@ const TableOfContentItems = styled.div`
   position: sticky;
   top: calc(var(--navbar-height) + 20px);
   max-height: calc(100vh - var(--navbar-height) - 20px);
-  border-left: 1px solid var(--color-border-light);
+  border-left: 1px solid var(--global-border-color);
   overflow-y: auto;
   width: var(--toc-width); ;
 `;

package/src/TableOfContent/__tests__/TableOfContent.test.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+
+import { TableOfContent } from '@theme';
+import { renderWithTheme } from '../../../tests/utils';
+
+describe('TableOfContent', () => {
+  it('renders', () => {
+    const { container } = renderWithTheme(
+      <TableOfContent
+        headings={[
+          { id: '1', value: 'test 1', depth: 1 },
+          { id: '2', value: 'test 2', depth: 1 },
+          null,
+          { id: '3', value: '', depth: 2 },
+          { id: '4', value: 'test 4', depth: 0 },
+          { id: '4', value: 'test 4', depth: 5 },
+          { id: '5', value: 'test 5', depth: 1 },
+        ]}
+        tocMaxDepth={3}
+        contentWrapper={null}
+      />,
+    );
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('renders nothing with no headings', () => {
+    const { container } = renderWithTheme(
+      <TableOfContent headings={null} tocMaxDepth={3} contentWrapper={null} />,
+    );
+
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('renders nothing with empty headings array', () => {
+    const { container } = renderWithTheme(
+      <TableOfContent headings={[]} tocMaxDepth={3} contentWrapper={null} />,
+    );
+
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('renders nothing for single heading with depth 1', () => {
+    const { container } = renderWithTheme(
+      <TableOfContent
+        headings={[{ id: '3', value: 'test 3', depth: 1 }]}
+        tocMaxDepth={3}
+        contentWrapper={null}
+      />,
+    );
+
+    expect(container.firstChild).toBeNull();
+  });
+  it('renders nothing for single empty heading', () => {
+    const { container } = renderWithTheme(
+      <TableOfContent headings={[null]} tocMaxDepth={3} contentWrapper={null} />,
+    );
+
+    expect(container.firstChild).toBeNull();
+  });
+});

package/src/TableOfContent/__tests__/__snapshots__/TableOfContent.test.tsx.snap

@@ -0,0 +1,153 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TableOfContent renders 1`] = `
+.c2 {
+  font-size: 0.8em;
+  padding: 10px 15px;
+  font-weight: bold;
+  text-transform: uppercase;
+}
+
+.c3 {
+  display: block;
+  color: var(--color-content);
+  cursor: pointer;
+  font-size: 0.8em;
+  padding: 10px 15px;
+  padding-left: 0px;
+  -webkit-transition: background-color 0.3s,color 0.3s;
+  transition: background-color 0.3s,color 0.3s;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  word-break: break-word;
+  font-family: var(--h-font-family);
+}
+
+.c3:hover,
+.c3.active {
+  color: var(--sidebar-item-active-color);
+  background-color: var(--sidebar-item-active-background-color);
+}
+
+.c3:empty {
+  padding: 0;
+}
+
+.c4 {
+  display: block;
+  color: var(--color-content);
+  cursor: pointer;
+  font-size: 0.8em;
+  padding: 10px 15px;
+  padding-left: 15px;
+  -webkit-transition: background-color 0.3s,color 0.3s;
+  transition: background-color 0.3s,color 0.3s;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  word-break: break-word;
+  font-family: var(--h-font-family);
+}
+
+.c4:hover,
+.c4.active {
+  color: var(--sidebar-item-active-color);
+  background-color: var(--sidebar-item-active-background-color);
+}
+
+.c4:empty {
+  padding: 0;
+}
+
+.c5 {
+  display: block;
+  color: var(--color-content);
+  cursor: pointer;
+  font-size: 0.8em;
+  padding: 10px 15px;
+  padding-left: -15px;
+  -webkit-transition: background-color 0.3s,color 0.3s;
+  transition: background-color 0.3s,color 0.3s;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  word-break: break-word;
+  font-family: var(--h-font-family);
+}
+
+.c5:hover,
+.c5.active {
+  color: var(--sidebar-item-active-color);
+  background-color: var(--sidebar-item-active-background-color);
+}
+
+.c5:empty {
+  padding: 0;
+}
+
+.c0 {
+  font-size: 1rem;
+  background-color: transparent;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  display: none !important;
+  font-family: var(--font-family-base);
+}
+
+.c1 {
+  position: -webkit-sticky;
+  position: sticky;
+  top: calc(var(--navbar-height) + 20px);
+  max-height: calc(100vh - var(--navbar-height) - 20px);
+  border-left: 1px solid var(--global-border-color);
+  overflow-y: auto;
+  width: var(--toc-width);
+}
+
+@media screen and (min-width:85rem) {
+  .c0 {
+    width: var(--toc-width);
+    display: block !important;
+  }
+}
+
+<aside
+  class="c0"
+  data-component-name="TableOfContent/TableOfContent"
+>
+  <div
+    class="c1"
+  >
+    <div
+      class="c2"
+    >
+      On this page
+    </div>
+    <a
+      class="c3"
+      data-cy="toc-test 2"
+      href="#2"
+    >
+      test 2
+    </a>
+    <a
+      class="c4"
+      data-cy="toc-"
+      href="#3"
+    />
+    <a
+      class="c5"
+      data-cy="toc-test 4"
+      href="#4"
+    >
+      test 4
+    </a>
+    <a
+      class="c3"
+      data-cy="toc-test 5"
+      href="#5"
+    >
+      test 5
+    </a>
+  </div>
+</aside>
+`;

package/src/TableOfContent/index.ts

@@ -0,0 +1 @@
+export * from '@theme/TableOfContent/TableOfContent';

package/src/Tooltip/Tooltip.stories.tsx

@@ -4,7 +4,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { Tooltip } from '@theme/Tooltip';
 
 export default {
-  title: 'Tooltip',
+  title: 'Components/Tooltip',
   component: Tooltip,
 } as ComponentMeta<typeof Tooltip>;
 

package/src/Tooltip/index.ts

@@ -1 +1 @@
-export * from './Tooltip';
+export * from '@theme/Tooltip/Tooltip';

package/src/Welcome.stories.mdx

@@ -0,0 +1,7 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Welcome" />
+
+# @redocly/theme
+
+Welcome to storybook for [@redocly/theme](https://www.npmjs.com/package/@redocly/theme) package.