@redocly/theme 0.1.9 → 0.1.10

package/hooks/index.d.ts

@@ -1,7 +1,7 @@
-export * from './useControl';
-export * from './useMount';
-export * from './useUnmount';
-export * from './useActiveHeading';
-export * from './useActiveSectionId';
-export * from './useFullHeight';
-export * from './useNavbarHeight';
+export * from '../hooks/useControl';
+export * from '../hooks/useMount';
+export * from '../hooks/useUnmount';
+export * from '../hooks/useActiveHeading';
+export * from '../hooks/useActiveSectionId';
+export * from '../hooks/useFullHeight';
+export * from '../hooks/useNavbarHeight';

package/hooks/index.js

@@ -14,10 +14,10 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./useControl"), exports);
-__exportStar(require("./useMount"), exports);
-__exportStar(require("./useUnmount"), exports);
-__exportStar(require("./useActiveHeading"), exports);
-__exportStar(require("./useActiveSectionId"), exports);
-__exportStar(require("./useFullHeight"), exports);
-__exportStar(require("./useNavbarHeight"), exports);
+__exportStar(require("../hooks/useControl"), exports);
+__exportStar(require("../hooks/useMount"), exports);
+__exportStar(require("../hooks/useUnmount"), exports);
+__exportStar(require("../hooks/useActiveHeading"), exports);
+__exportStar(require("../hooks/useActiveSectionId"), exports);
+__exportStar(require("../hooks/useFullHeight"), exports);
+__exportStar(require("../hooks/useNavbarHeight"), exports);

package/hooks/useActiveSectionId.d.ts

@@ -1,3 +1,3 @@
-import type { MenuProps } from '@theme/types/portal';
+import { Location } from 'history';
 export declare type UseActiveSectionIdReturnType = string;
-export declare function useActiveSectionId(location: MenuProps['location'], hasOverviewPage: boolean): UseActiveSectionIdReturnType;
+export declare function useActiveSectionId(location: Location, hasOverviewPage?: boolean): UseActiveSectionIdReturnType;

package/hooks/useActiveSectionId.js

@@ -8,6 +8,7 @@ var react_1 = require("react");
 var lodash_throttle_1 = __importDefault(require("lodash.throttle"));
 var useNavbarHeight_1 = require("../hooks/useNavbarHeight");
 function useActiveSectionId(location, hasOverviewPage) {
+    if (hasOverviewPage === void 0) { hasOverviewPage = false; }
     var _a = (0, react_1.useState)(''), itemId = _a[0], setItemId = _a[1];
     var navbarHeight = (0, useNavbarHeight_1.useNavbarHeight)(location);
     var scrollListener = (0, react_1.useMemo)(function () {

package/icons/ShelfIcon/index.d.ts

@@ -1,2 +1,2 @@
-export { ShelfIcon } from './ShelfIcon';
-export type { ShelfIconProps } from './ShelfIcon';
+export { ShelfIcon } from '../../icons/ShelfIcon/ShelfIcon';
+export type { ShelfIconProps } from '../../icons/ShelfIcon/ShelfIcon';

package/icons/ShelfIcon/index.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ShelfIcon = void 0;
-var ShelfIcon_1 = require("./ShelfIcon");
+var ShelfIcon_1 = require("../../icons/ShelfIcon/ShelfIcon");
 Object.defineProperty(exports, "ShelfIcon", { enumerable: true, get: function () { return ShelfIcon_1.ShelfIcon; } });

package/icons/index.d.ts

@@ -1 +1 @@
-export * from './ShelfIcon';
+export * from '../icons/ShelfIcon';

package/icons/index.js

@@ -14,4 +14,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./ShelfIcon"), exports);
+__exportStar(require("../icons/ShelfIcon"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "description": "Shared UI components",
   "author": "team@redocly.com",
   "license": "SEE LICENSE IN LICENSE",

package/src/Button/Button.stories.tsx

@@ -4,7 +4,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { Button } from '@theme/Button';
 
 export default {
-  title: 'Button',
+  title: 'Components/Button',
   component: Button,
   argTypes: {
     size: {

package/src/Button/index.ts

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

package/src/CodeBlock/index.ts

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

package/src/CopyButton/CopyButton.stories.tsx

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

package/src/CopyButton/index.ts

@@ -1,2 +1,2 @@
-export * from './CopyButtonWrapper';
-export * from './CopyButton';
+export * from '@theme/CopyButton/CopyButtonWrapper';
+export * from '@theme/CopyButton/CopyButton';

package/src/Footer/Footer.stories.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+
+import { Footer } from '@theme/Footer';
+
+export default {
+  title: 'Portal/Footer',
+  component: Footer,
+} as ComponentMeta<typeof Footer>;
+
+const Template: ComponentStory<typeof Footer> = (args) => <Footer {...args} />;
+
+export const WithCopyrightOnly = Template.bind({});
+WithCopyrightOnly.args = {
+  copyrightText: 'Redocly ®',
+};
+
+export const WithColumns = Template.bind({});
+WithColumns.args = {
+  copyrightText: 'Redocly ®',
+  columns: [
+    {
+      group: 'Products',
+      items: [
+        { label: 'Portal', active: true, type: 'link', link: 'https://redocly.com/portals/' },
+        { label: 'Workflows', type: 'link', link: 'https://redocly.com/workflows/' },
+        { label: 'Redocly CLI', type: 'link', link: 'https://redocly.com/redocly-cli/' },
+      ],
+    },
+    {
+      group: 'Explore',
+      items: [
+        { label: 'Pricing', type: 'link', link: 'https://redocly.com/pricing/' },
+        { label: 'Enterprise', type: 'link', link: 'https://redocly.com/enterprise/' },
+        { label: 'Customers', type: 'link', link: 'https://redocly.com/customers/' },
+      ],
+    },
+    {
+      group: 'Resources',
+      items: [
+        { label: 'Docs', type: 'link', link: 'https://redocly.com/docs/' },
+        { label: 'Blog', type: 'link', link: 'https://redocly.com/blog/' },
+        { label: 'Webinars', type: 'link', link: 'https://redocly.com/webinars/' },
+        { label: 'Error link', type: 'error' },
+      ],
+    },
+    {
+      group: 'Other',
+      items: [
+        { label: 'External', type: 'link', link: 'https://google.com/', external: true },
+        { type: 'separator', separatorLine: true },
+        { label: 'Twitter', type: 'link', link: 'https://twitter.com/' },
+        { label: 'Error link', type: 'error' },
+      ],
+    },
+  ],
+};

package/src/Footer/Footer.tsx

@@ -5,10 +5,7 @@ import { FooterColumns } from '@theme/Footer/FooterColumns';
 import { FooterCopyright } from '@theme/Footer/FooterCopyright';
 import type { FooterConfig } from '@theme/types/portal';
 
-export function Footer({
-  columns,
-  copyrightText,
-}: React.PropsWithChildren<FooterConfig>): JSX.Element | null {
+export function Footer({ columns, copyrightText }: FooterConfig): JSX.Element | null {
   if (!(columns?.length || copyrightText)) {
     return null;
   }
@@ -24,11 +21,11 @@ export function Footer({
 const FooterContainer = styled.footer`
   font-size: 1rem;
   flex-shrink: 0;
-  background-color: var(--footer-color-background);
-  color: var(--footer-color-text);
-  font-family: var(--font-family-primary);
+  background-color: var(--footer-background-color);
+  color: var(--footer-text-color);
+  font-family: var(--font-family-base);
   a,
   a:hover {
-    color: var(--footer-color-text);
+    color: var(--footer-text-color);
   }
 `;

package/src/Footer/FooterColumn.tsx

@@ -12,17 +12,17 @@ export function FooterColumn({ column }: FooterColumnProps): JSX.Element {
   return (
     <FooterColumnContainer data-component-name="Footer/FooterColumn">
       <FooterColumnTitle>{column.group || column.label}</FooterColumnTitle>
-      {column.items.map((columnItem, columnItemInex) => {
+      {column.items.map((columnItem, columnItemIndex) => {
         if (columnItem.type === 'error') {
           return null;
         }
 
         return columnItem.type === 'separator' ? (
-          <FooterSeparator key={columnItem.label + '_' + columnItemInex}>
+          <FooterSeparator key={columnItem.label + '_' + columnItemIndex}>
             {columnItem.label}
           </FooterSeparator>
         ) : (
-          <FooterLink key={columnItemInex} to={columnItem.link} data-cy={columnItem.label}>
+          <FooterLink key={columnItemIndex} to={columnItem.link} data-cy={columnItem.label}>
             {columnItem.label}
           </FooterLink>
         );
@@ -36,7 +36,7 @@ const FooterColumnTitle = styled.p`
   font-weight: var(--font-weight-regular);
   font-size: 24px;
   margin-bottom: 1.5em;
-  font-family: var(--font-family-h);
+  font-family: var(--h-font-family);
 `;
 
 const FooterSeparator = styled.div`
@@ -44,19 +44,19 @@ const FooterSeparator = styled.div`
   margin: 10px 0 5px 0;
   font-size: 0.75em;
   text-transform: uppercase;
-  font-family: var(--font-family-h);
+  font-family: var(--h-font-family);
 `;
 
 const FooterColumnContainer = styled.div`
   display: flex;
   flex-direction: column;
   text-align: left;
-  margin: 0px 30px;
+  margin: 0 30px;
 `;
 
 const FooterLink = styled(Link)`
   font-weight: var(--font-weight-bold);
   padding-bottom: 0.75em;
-  color: var(--footer-color-text);
+  color: var(--footer-text-color);
   text-decoration: none;
 `;

package/src/Footer/FooterColumns.tsx

@@ -6,7 +6,9 @@ import type { FooterConfig } from '@theme/types/portal';
 
 export function FooterColumns({
   columns = [],
-}: React.PropsWithChildren<{ columns?: FooterConfig['columns'] }>): JSX.Element | null {
+}: {
+  columns?: FooterConfig['columns'];
+}): JSX.Element | null {
   if (!columns?.length) {
     return null;
   }

package/src/Footer/FooterCopyright.tsx

@@ -5,7 +5,9 @@ import type { FooterConfig } from '@theme/types/portal';
 
 export function FooterCopyright({
   copyrightText = '',
-}: React.PropsWithChildren<{ copyrightText?: FooterConfig['copyrightText'] }>): JSX.Element | null {
+}: {
+  copyrightText?: FooterConfig['copyrightText'];
+}): JSX.Element | null {
   return copyrightText ? (
     <Wrapper data-component-name="Footer/FooterCopyright">{copyrightText}</Wrapper>
   ) : null;
@@ -17,8 +19,8 @@ const Wrapper = styled.section`
   font-size: 0.875em;
   padding: 1.5em 3em;
   font-weight: var(--font-weight-bold);
-  background-color: var(--footer-color-background);
-  color: var(--footer-color-text);
+  background-color: var(--footer-background-color);
+  color: var(--footer-text-color);
   text-align: center;
   span {
     max-width: 1200px;

package/src/Footer/__tests__/Footer.test.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+
+import { renderWithTheme } from '../../../tests/utils';
+
+import { Footer } from '@theme/Footer';
+
+describe('Footer', () => {
+  it('renders columns with copyright and columns', () => {
+    const { container } = renderWithTheme(
+      <Footer
+        columns={[
+          {
+            group: 'Other',
+            items: [
+              { label: 'External', type: 'link', link: 'https://google.com/' },
+              { type: 'separator', separatorLine: true },
+              { label: 'Twitter', type: 'link', link: 'https://twitter.com/' },
+              { label: 'Error link', type: 'error' },
+            ],
+          },
+          {
+            group: '',
+            label: 'Another',
+            items: [
+              { type: 'separator', separatorLine: true },
+              { label: 'Twitter', type: 'link', link: 'https://twitter.com/' },
+              { label: 'Error link', type: 'error' },
+            ],
+          },
+        ]}
+        copyrightText="Copyright®"
+      />,
+    );
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('renders columns with copyright only', () => {
+    const { container } = renderWithTheme(<Footer copyrightText="Copyright®" />);
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('renders nothing, if no columns and copyright provided', () => {
+    const { container } = renderWithTheme(<Footer />);
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('renders nothing, if empty columns and copyright provided', () => {
+    const { container } = renderWithTheme(<Footer columns={[]} />);
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,253 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Footer renders columns with copyright and columns 1`] = `
+.c4 {
+  display: inline-block;
+  font-weight: var(--font-weight-regular);
+  font-size: 24px;
+  margin-bottom: 1.5em;
+  font-family: var(--h-font-family);
+}
+
+.c6 {
+  opacity: 0.75;
+  margin: 10px 0 5px 0;
+  font-size: 0.75em;
+  text-transform: uppercase;
+  font-family: var(--h-font-family);
+}
+
+.c3 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  text-align: left;
+  margin: 0 30px;
+}
+
+.c5 {
+  font-weight: var(--font-weight-bold);
+  padding-bottom: 0.75em;
+  color: var(--footer-text-color);
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c1 {
+  padding: 3em 20px 1em 20px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.c2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+}
+
+.c7 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  font-size: 0.875em;
+  padding: 1.5em 3em;
+  font-weight: var(--font-weight-bold);
+  background-color: var(--footer-background-color);
+  color: var(--footer-text-color);
+  text-align: center;
+}
+
+.c7 span {
+  max-width: 1200px;
+}
+
+.c0 {
+  font-size: 1rem;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  background-color: var(--footer-background-color);
+  color: var(--footer-text-color);
+  font-family: var(--font-family-base);
+}
+
+.c0 a,
+.c0 a:hover {
+  color: var(--footer-text-color);
+}
+
+@media screen and (min-width:50rem) {
+  .c1 {
+    padding: 5.625em 20px 3.9375em 20px;
+  }
+}
+
+@media print {
+  .c1 {
+    color: black;
+    display: none;
+  }
+}
+
+@media screen and (min-width:50rem) {
+  .c2 {
+    -webkit-box-pack: space-evenly;
+    -webkit-justify-content: space-evenly;
+    -ms-flex-pack: space-evenly;
+    justify-content: space-evenly;
+  }
+}
+
+<footer
+  class="c0"
+  data-component-name="Footer/Footer"
+>
+  <div
+    class="c1"
+    data-component-name="Footer/FooterColumns"
+  >
+    <div
+      class="c2"
+    >
+      <div
+        class="c3"
+        data-component-name="Footer/FooterColumn"
+      >
+        <p
+          class="c4"
+        >
+          Other
+        </p>
+        <a
+          class="c5"
+          data-cy="External"
+          href="https://google.com/"
+          to="https://google.com/"
+        >
+          External
+        </a>
+        <div
+          class="c6"
+        />
+        <a
+          class="c5"
+          data-cy="Twitter"
+          href="https://twitter.com/"
+          to="https://twitter.com/"
+        >
+          Twitter
+        </a>
+      </div>
+      <div
+        class="c3"
+        data-component-name="Footer/FooterColumn"
+      >
+        <p
+          class="c4"
+        >
+          Another
+        </p>
+        <div
+          class="c6"
+        />
+        <a
+          class="c5"
+          data-cy="Twitter"
+          href="https://twitter.com/"
+          to="https://twitter.com/"
+        >
+          Twitter
+        </a>
+      </div>
+    </div>
+  </div>
+  <section
+    class="c7"
+    data-component-name="Footer/FooterCopyright"
+  >
+    Copyright®
+  </section>
+</footer>
+`;
+
+exports[`Footer renders columns with copyright only 1`] = `
+.c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  font-size: 0.875em;
+  padding: 1.5em 3em;
+  font-weight: var(--font-weight-bold);
+  background-color: var(--footer-background-color);
+  color: var(--footer-text-color);
+  text-align: center;
+}
+
+.c1 span {
+  max-width: 1200px;
+}
+
+.c0 {
+  font-size: 1rem;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  background-color: var(--footer-background-color);
+  color: var(--footer-text-color);
+  font-family: var(--font-family-base);
+}
+
+.c0 a,
+.c0 a:hover {
+  color: var(--footer-text-color);
+}
+
+<footer
+  class="c0"
+  data-component-name="Footer/Footer"
+>
+  <section
+    class="c1"
+    data-component-name="Footer/FooterCopyright"
+  >
+    Copyright®
+  </section>
+</footer>
+`;
+
+exports[`Footer renders nothing, if empty columns and copyright provided 1`] = `null`;
+
+exports[`Footer renders nothing, if no columns and copyright provided 1`] = `null`;

package/src/Footer/index.ts

@@ -1,4 +1,4 @@
-export * from './Footer';
-export * from './FooterColumn';
-export * from './FooterColumns';
-export * from './FooterCopyright';
+export * from '@theme/Footer/Footer';
+export * from '@theme/Footer/FooterColumn';
+export * from '@theme/Footer/FooterColumns';
+export * from '@theme/Footer/FooterCopyright';

package/src/Headings/index.ts

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

package/src/JsonViewer/JsonViewer.stories.tsx

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

package/src/JsonViewer/index.ts

@@ -1,2 +1,2 @@
-export * from './JsonViewer';
-export * from './styled';
+export * from '@theme/JsonViewer/JsonViewer';
+export * from '@theme/JsonViewer/styled';

package/src/Layout/__tests__/PageLayout.test.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { renderWithTheme } from '../../../tests/utils';
+
+import { PageLayout } from '@theme/Layout/PageLayout';
+
+describe('PageLayout', () => {
+  it('renders', () => {
+    const { container } = renderWithTheme(
+      <PageLayout sidebar={<div>sidebar</div>}>
+        <div>test content</div>
+      </PageLayout>,
+    );
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

package/src/Layout/__tests__/RootLayout.test.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { renderWithTheme } from '../../../tests/utils';
+
+import { RootLayout } from '@theme/Layout/RootLayout';
+
+describe('RootLayout', () => {
+  it('renders', () => {
+    const { container } = renderWithTheme(
+      <RootLayout footer={<div>footer</div>} navbar={<div>navbar</div>}>
+        <div>content</div>
+      </RootLayout>,
+    );
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});