@redocly/theme 0.1.7 → 0.1.10

package/mocks/search.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFuseSearch = void 0;
+function useFuseSearch() {
+    return {
+        query: '',
+        setQuery: function (val) {
+            this.query = val;
+        },
+        items: [],
+    };
+}
+exports.useFuseSearch = useFuseSearch;

package/mocks/types/index.d.ts

@@ -0,0 +1 @@
+export declare type ResolvedNavLinkItem = any;

package/mocks/types/index.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/mocks/usePreloadHistory.d.ts

@@ -0,0 +1,3 @@
+export declare function usePreloadHistory(): {
+    push: (url: string) => void;
+};

package/mocks/usePreloadHistory.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePreloadHistory = void 0;
+function usePreloadHistory() {
+    var history = [];
+    return {
+        push: function (url) {
+            history.push(url);
+        },
+    };
+}
+exports.usePreloadHistory = usePreloadHistory;

package/package.json

@@ -1,15 +1,18 @@
 {
   "name": "@redocly/theme",
-  "version": "0.1.7",
+  "version": "0.1.10",
   "description": "Shared UI components",
   "author": "team@redocly.com",
   "license": "SEE LICENSE IN LICENSE",
   "main": "index.js",
   "typings": "index.d.ts",
   "peerDependencies": {
+    "lodash.throttle": "^4.1.1",
     "prismjs": "^1.28.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "styled-components": "^5.3.1"
+    "react-router-dom": "^5.3.0",
+    "styled-components": "^5.3.1",
+    "styled-system": "^5.1.5"
   }
 }

package/src/Button/Button.stories.tsx

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

package/src/Button/__tests__/Button.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 
-import { Button } from '../Button';
+import { Button } from '@theme/Button';
 
 describe('Button', () => {
   it('renders', () => {

package/src/Button/index.ts

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

package/src/CodeBlock/__tests__/CodeBlock.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 
-import { CodeBlock } from '../CodeBlock';
+import { CodeBlock } from '@theme/CodeBlock';
 
 describe('CodeBlock', () => {
   it('renders', () => {

package/src/CodeBlock/index.ts

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

package/src/CopyButton/CopyButton.stories.tsx

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

package/src/CopyButton/CopyButton.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-import { Button } from '../Button';
+import { Button } from '@theme/Button';
 
 export interface CopyButtonProps {
   text: string;

package/src/CopyButton/CopyButtonWrapper.tsx

@@ -1,9 +1,9 @@
 import React, { memo } from 'react';
 
-import { SamplesControlButton } from '../SamplesPanelControls';
-import { Tooltip } from '../Tooltip';
-import { useControl } from '../hooks';
-import { ClipboardService } from '../utils';
+import { SamplesControlButton } from '@theme/SamplesPanelControls';
+import { Tooltip } from '@theme/Tooltip';
+import { useControl } from '@theme/hooks';
+import { ClipboardService } from '@theme/utils';
 
 export interface CopyButtonWrapperProps {
   data: unknown;

package/src/CopyButton/__tests__/CopyButton.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { fireEvent, getByText, render } from '@testing-library/react';
 
-import { CopyButton } from '../CopyButton';
+import { CopyButton } from '@theme/CopyButton';
 
 const mockSetState = jest.fn();
 

package/src/CopyButton/__tests__/CopyButtonWrapper.test.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 
 import { renderWithTheme } from '../../../tests/utils';
-import { CopyButtonWrapper } from '../CopyButtonWrapper';
+
+import { CopyButtonWrapper } from '@theme/CopyButton';
 
 describe('CopyButtonWrapper', () => {
   it('renders', () => {

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

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

package/src/Footer/FooterColumn.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { Link } from '@portal/Link';
+import type { FooterColumn as Column } from '@theme/types/portal';
+
+interface FooterColumnProps {
+  column: Column;
+}
+
+export function FooterColumn({ column }: FooterColumnProps): JSX.Element {
+  return (
+    <FooterColumnContainer data-component-name="Footer/FooterColumn">
+      <FooterColumnTitle>{column.group || column.label}</FooterColumnTitle>
+      {column.items.map((columnItem, columnItemIndex) => {
+        if (columnItem.type === 'error') {
+          return null;
+        }
+
+        return columnItem.type === 'separator' ? (
+          <FooterSeparator key={columnItem.label + '_' + columnItemIndex}>
+            {columnItem.label}
+          </FooterSeparator>
+        ) : (
+          <FooterLink key={columnItemIndex} to={columnItem.link} data-cy={columnItem.label}>
+            {columnItem.label}
+          </FooterLink>
+        );
+      })}
+    </FooterColumnContainer>
+  );
+}
+
+const FooterColumnTitle = styled.p`
+  display: inline-block;
+  font-weight: var(--font-weight-regular);
+  font-size: 24px;
+  margin-bottom: 1.5em;
+  font-family: var(--h-font-family);
+`;
+
+const FooterSeparator = styled.div`
+  opacity: 0.75;
+  margin: 10px 0 5px 0;
+  font-size: 0.75em;
+  text-transform: uppercase;
+  font-family: var(--h-font-family);
+`;
+
+const FooterColumnContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  text-align: left;
+  margin: 0 30px;
+`;
+
+const FooterLink = styled(Link)`
+  font-weight: var(--font-weight-bold);
+  padding-bottom: 0.75em;
+  color: var(--footer-text-color);
+  text-decoration: none;
+`;

package/src/Footer/FooterColumns.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { FooterColumn } from '@theme/Footer/FooterColumn';
+import type { FooterConfig } from '@theme/types/portal';
+
+export function FooterColumns({
+  columns = [],
+}: {
+  columns?: FooterConfig['columns'];
+}): JSX.Element | null {
+  if (!columns?.length) {
+    return null;
+  }
+
+  return (
+    <FooterColumnsContainer data-component-name="Footer/FooterColumns">
+      <FooterRow>
+        {columns.map((column, index) => (
+          <FooterColumn key={index} column={column} />
+        ))}
+      </FooterRow>
+    </FooterColumnsContainer>
+  );
+}
+
+export const FooterColumnsContainer = styled.div`
+  padding: 3em 20px 1em 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  max-width: 1200px;
+  margin: 0 auto;
+
+  ${({ theme }) => theme.mediaQueries.small} {
+    padding: 5.625em 20px 3.9375em 20px;
+  }
+
+  ${({ theme }) => theme.mediaQueries.print} {
+    color: black;
+    display: none;
+  }
+`;
+
+export const FooterRow = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+
+  ${({ theme }) => theme.mediaQueries.small} {
+    justify-content: space-evenly;
+  }
+`;

package/src/Footer/FooterCopyright.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { FooterConfig } from '@theme/types/portal';
+
+export function FooterCopyright({
+  copyrightText = '',
+}: {
+  copyrightText?: FooterConfig['copyrightText'];
+}): JSX.Element | null {
+  return copyrightText ? (
+    <Wrapper data-component-name="Footer/FooterCopyright">{copyrightText}</Wrapper>
+  ) : null;
+}
+
+const Wrapper = styled.section`
+  display: flex;
+  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;
+  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();
+  });
+});