@redocly/theme 0.1.10 → 0.1.11

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

@@ -0,0 +1,275 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PageNavigation renders 1`] = `
+.c2 {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-align: center;
+  width: auto;
+  outline: none;
+  border: none;
+  border-radius: var(--button-border-radius);
+  font-weight: var(--button-font-weight);
+  font-size: 14px;
+  padding: 2px 20px;
+  cursor: pointer;
+  -webkit-transition: background-color 0.25s ease,border-color 0.25s ease,box-shadow 0.25s ease;
+  transition: background-color 0.25s ease,border-color 0.25s ease,box-shadow 0.25s ease;
+  line-height: 1;
+  font-family: var(--button-font-family);
+  box-shadow: var(--button-box-shadow);
+  color: var(--button-background-color);
+  border: 2px solid var(--button-background-color);
+  background-color: transparent;
+  font-size: var(--button-large-font-size);
+  padding: var(--button-large-padding);
+  min-width: var(--button-large-min-width);
+}
+
+.c2:hover {
+  box-shadow: var(--button-active-box-shadow);
+}
+
+.c2:active {
+  box-shadow: var(--button-active-box-shadow);
+}
+
+.c2:hover {
+  border: 2px solid var(--button-active-background-color);
+  background-color: transparent;
+}
+
+.c2:active {
+  border: 2px solid var(--button-outlined-active-border-color);
+}
+
+.c1 + .c1 {
+  margin-left: 0.85em;
+}
+
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  margin: 25px 0px;
+}
+
+<div
+  class="c0"
+  data-component-name="PageNavigation/PageNavigation"
+>
+  <a
+    class="c1 c2 button-color-default"
+    data-component-name="ui/Button"
+    href="https://previous-page"
+    role="button"
+    to="https://previous-page"
+    variant="outlined"
+  >
+    Back to 
+    The Previous Page
+  </a>
+  <a
+    class="c1 c2 button-color-default"
+    data-component-name="ui/Button"
+    href="https://next-page"
+    role="button"
+    to="https://next-page"
+    variant="outlined"
+  >
+    Next to 
+    The Next Page
+  </a>
+</div>
+`;
+
+exports[`PageNavigation renders with missing next and previous pages 1`] = `
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  margin: 25px 0px;
+}
+
+<div
+  class="c0"
+  data-component-name="PageNavigation/PageNavigation"
+>
+  <div>
+     
+  </div>
+  <div>
+     
+  </div>
+</div>
+`;
+
+exports[`PageNavigation renders with next page only 1`] = `
+.c2 {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-align: center;
+  width: auto;
+  outline: none;
+  border: none;
+  border-radius: var(--button-border-radius);
+  font-weight: var(--button-font-weight);
+  font-size: 14px;
+  padding: 2px 20px;
+  cursor: pointer;
+  -webkit-transition: background-color 0.25s ease,border-color 0.25s ease,box-shadow 0.25s ease;
+  transition: background-color 0.25s ease,border-color 0.25s ease,box-shadow 0.25s ease;
+  line-height: 1;
+  font-family: var(--button-font-family);
+  box-shadow: var(--button-box-shadow);
+  color: var(--button-background-color);
+  border: 2px solid var(--button-background-color);
+  background-color: transparent;
+  font-size: var(--button-large-font-size);
+  padding: var(--button-large-padding);
+  min-width: var(--button-large-min-width);
+}
+
+.c2:hover {
+  box-shadow: var(--button-active-box-shadow);
+}
+
+.c2:active {
+  box-shadow: var(--button-active-box-shadow);
+}
+
+.c2:hover {
+  border: 2px solid var(--button-active-background-color);
+  background-color: transparent;
+}
+
+.c2:active {
+  border: 2px solid var(--button-outlined-active-border-color);
+}
+
+.c1 + .c1 {
+  margin-left: 0.85em;
+}
+
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  margin: 25px 0px;
+}
+
+<div
+  class="c0"
+  data-component-name="PageNavigation/PageNavigation"
+>
+  <div>
+     
+  </div>
+  <a
+    class="c1 c2 button-color-default"
+    data-component-name="ui/Button"
+    href="https://next-page"
+    role="button"
+    to="https://next-page"
+    variant="outlined"
+  >
+    Next to 
+    The Next Page
+  </a>
+</div>
+`;
+
+exports[`PageNavigation renders with previous page only 1`] = `
+.c2 {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-align: center;
+  width: auto;
+  outline: none;
+  border: none;
+  border-radius: var(--button-border-radius);
+  font-weight: var(--button-font-weight);
+  font-size: 14px;
+  padding: 2px 20px;
+  cursor: pointer;
+  -webkit-transition: background-color 0.25s ease,border-color 0.25s ease,box-shadow 0.25s ease;
+  transition: background-color 0.25s ease,border-color 0.25s ease,box-shadow 0.25s ease;
+  line-height: 1;
+  font-family: var(--button-font-family);
+  box-shadow: var(--button-box-shadow);
+  color: var(--button-background-color);
+  border: 2px solid var(--button-background-color);
+  background-color: transparent;
+  font-size: var(--button-large-font-size);
+  padding: var(--button-large-padding);
+  min-width: var(--button-large-min-width);
+}
+
+.c2:hover {
+  box-shadow: var(--button-active-box-shadow);
+}
+
+.c2:active {
+  box-shadow: var(--button-active-box-shadow);
+}
+
+.c2:hover {
+  border: 2px solid var(--button-active-background-color);
+  background-color: transparent;
+}
+
+.c2:active {
+  border: 2px solid var(--button-outlined-active-border-color);
+}
+
+.c1 + .c1 {
+  margin-left: 0.85em;
+}
+
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  margin: 25px 0px;
+}
+
+<div
+  class="c0"
+  data-component-name="PageNavigation/PageNavigation"
+>
+  <a
+    class="c1 c2 button-color-default"
+    data-component-name="ui/Button"
+    href="https://previous-page"
+    role="button"
+    to="https://previous-page"
+    variant="outlined"
+  >
+    Back to 
+    The Previous Page
+  </a>
+  <div>
+     
+  </div>
+</div>
+`;

package/src/PageNavigation/__tests__/__snapshots__/PreviousPageLink.test.tsx.snap

@@ -0,0 +1,67 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PreviousPageLink renders when prevPage exists 1`] = `
+.c1 {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-align: center;
+  width: auto;
+  outline: none;
+  border: none;
+  border-radius: var(--button-border-radius);
+  font-weight: var(--button-font-weight);
+  font-size: 14px;
+  padding: 2px 20px;
+  cursor: pointer;
+  -webkit-transition: background-color 0.25s ease,border-color 0.25s ease,box-shadow 0.25s ease;
+  transition: background-color 0.25s ease,border-color 0.25s ease,box-shadow 0.25s ease;
+  line-height: 1;
+  font-family: var(--button-font-family);
+  box-shadow: var(--button-box-shadow);
+  color: var(--button-background-color);
+  border: 2px solid var(--button-background-color);
+  background-color: transparent;
+  font-size: var(--button-large-font-size);
+  padding: var(--button-large-padding);
+  min-width: var(--button-large-min-width);
+}
+
+.c1:hover {
+  box-shadow: var(--button-active-box-shadow);
+}
+
+.c1:active {
+  box-shadow: var(--button-active-box-shadow);
+}
+
+.c1:hover {
+  border: 2px solid var(--button-active-background-color);
+  background-color: transparent;
+}
+
+.c1:active {
+  border: 2px solid var(--button-outlined-active-border-color);
+}
+
+.c0 + .c0 {
+  margin-left: 0.85em;
+}
+
+<a
+  class="c0 c1 button-color-default"
+  data-component-name="ui/Button"
+  href="https://test.com"
+  role="button"
+  to="https://test.com"
+  variant="outlined"
+>
+  Back to 
+  The Previous Page
+</a>
+`;
+
+exports[`PreviousPageLink renders when prevPage is null 1`] = `
+<div>
+   
+</div>
+`;

package/src/Search/ClearIcon.tsx

@@ -2,18 +2,17 @@ import React, { SVGProps } from 'react';
 import styled from 'styled-components';
 
 const Icon = (props: SVGProps<SVGSVGElement>) => (
-  <span data-component-name="Search/ClearIcon">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      version="1.1"
-      x="0"
-      y="0"
-      viewBox="0 0 298.7 298.7"
-      {...props}
-    >
-      <polygon points="298.7 30.2 268.5 0 149.3 119.1 30.2 0 0 30.2 119.1 149.3 0 268.5 30.2 298.7 149.3 179.5 268.5 298.7 298.7 268.5 179.5 149.3 " />
-    </svg>
-  </span>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    version="1.1"
+    x="0"
+    y="0"
+    viewBox="0 0 298.7 298.7"
+    data-component-name="Search/ClearIcon"
+    {...props}
+  >
+    <polygon points="298.7 30.2 268.5 0 149.3 119.1 30.2 0 0 30.2 119.1 149.3 0 268.5 30.2 298.7 149.3 179.5 268.5 298.7 298.7 268.5 179.5 149.3 " />
+  </svg>
 );
 
 export const ClearIcon = styled(Icon)`

package/src/Search/SearchIcon.tsx

@@ -2,18 +2,17 @@ import React, { SVGProps } from 'react';
 import styled from 'styled-components';
 
 const Icon = (props: SVGProps<SVGSVGElement>) => (
-  <span data-component-name="Search/SearchIcon">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      version="1.1"
-      x="0"
-      y="0"
-      viewBox="0 0 490 490"
-      {...props}
-    >
-      <path d="M484 455.2L366.2 337.4c29.2-35.6 46.8-81.2 46.8-130.9C413 92.5 320.5 0 206.5 0 92.4 0 0 92.5 0 206.5S92.4 413 206.5 413c49.7 0 95.2-17.5 130.8-46.7L455.1 484c8 8 20.9 8 28.9 0C492 476.1 492 463.1 484 455.2zM206.5 371.9C115.2 371.9 41 297.7 41 206.5S115.2 41 206.5 41C297.7 41 372 115.3 372 206.5S297.7 371.9 206.5 371.9z" />
-    </svg>
-  </span>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    version="1.1"
+    x="0"
+    y="0"
+    viewBox="0 0 490 490"
+    data-component-name="Search/SearchIcon"
+    {...props}
+  >
+    <path d="M484 455.2L366.2 337.4c29.2-35.6 46.8-81.2 46.8-130.9C413 92.5 320.5 0 206.5 0 92.4 0 0 92.5 0 206.5S92.4 413 206.5 413c49.7 0 95.2-17.5 130.8-46.7L455.1 484c8 8 20.9 8 28.9 0C492 476.1 492 463.1 484 455.2zM206.5 371.9C115.2 371.9 41 297.7 41 206.5S115.2 41 206.5 41C297.7 41 372 115.3 372 206.5S297.7 371.9 206.5 371.9z" />
+  </svg>
 );
 
 export const SearchIcon = styled(Icon)`

package/src/Search/__tests__/Input.test.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import { renderWithTheme } from '../../../tests/utils';
+
+import { FormInput } from '@theme/Search/Input';
+
+describe('FormInput', () => {
+  it('renders', () => {
+    const { container } = renderWithTheme(<FormInput />);
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

package/src/Search/__tests__/__snapshots__/Input.test.tsx.snap

@@ -0,0 +1,36 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FormInput renders 1`] = `
+.c0 {
+  padding: 1em 2.5em 1em 1em;
+  background-color: var(--input-background-color);
+  border-radius: var(--input-border-radius);
+  border: none;
+  outline: none;
+  color: var(--input-text-color);
+  font-size: var(--input-font-size);
+  font-family: var(--input-font-family);
+  line-height: var(--input-line-height);
+}
+
+.c0::-webkit-input-placeholder {
+  color: var(--input-text-color);
+}
+
+.c0::-moz-placeholder {
+  color: var(--input-text-color);
+}
+
+.c0:-ms-input-placeholder {
+  color: var(--input-text-color);
+}
+
+.c0::placeholder {
+  color: var(--input-text-color);
+}
+
+<input
+  class="c0"
+  data-component-name="Search/Input"
+/>
+`;

package/src/TableOfContent/TableOfContent.stories.tsx

@@ -23,17 +23,15 @@ export default {
   ],
 } as ComponentMeta<typeof TableOfContent>;
 
-const Template: ComponentStory<typeof TableOfContent> = (args) => (
-  <TableOfContent {...args}>Click</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: 1 },
-    { id: '3', value: 'test 3', depth: 2 },
-    { id: '4', value: 'test 4', depth: 2 },
-    { id: '5', value: 'test 5', 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

@@ -12,13 +12,13 @@ interface TableOfContentProps {
 }
 
 export function TableOfContent(props: TableOfContentProps): JSX.Element | null {
-  const { headings, tocMaxDepth } = props;
+  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 function TableOfContent(props: TableOfContentProps): JSX.Element | null {
               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}`}
@@ -79,11 +79,13 @@ const MenuItem = styled.a<{ depth: number }>`
   text-decoration: none;
   word-break: break-word;
   font-family: var(--h-font-family);
+
   :hover,
   &.active {
     color: var(--sidebar-item-active-color);
     background-color: var(--sidebar-item-active-background-color);
   }
+
   :empty {
     padding: 0;
   }

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();
+  });
+});