@redocly/theme 0.1.7 → 0.1.8

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/Footer/Footer.tsx

@@ -0,0 +1,34 @@
+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 default function Footer({
+  columns,
+  copyrightText,
+}: React.PropsWithChildren<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-color-background);
+  color: var(--footer-color-text);
+  font-family: var(--font-family-primary);
+  a,
+  a:hover {
+    color: var(--footer-color-text);
+  }
+`;

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

package/src/Footer/FooterColumns.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import FooterColumn from '@theme/Footer/FooterColumn';
+import type { FooterConfig } from '@theme/types/portal';
+
+export default function FooterColumns({
+  columns = [],
+}: React.PropsWithChildren<{ 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,26 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { FooterConfig } from '@theme/types/portal';
+
+export default function FooterCopyright({
+  copyrightText = '',
+}: React.PropsWithChildren<{ 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-color-background);
+  color: var(--footer-color-text);
+  text-align: center;
+  span {
+    max-width: 1200px;
+  }
+`;

package/src/Footer/index.tsx

@@ -0,0 +1,4 @@
+export { default as Footer } from './Footer';
+export { default as FooterColumn } from './FooterColumn';
+export { default as FooterColumns } from './FooterColumns';
+export { default as FooterCopyright } from './FooterCopyright';

package/src/Headings/Headings.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { H1, H2, H3 } from './Headings';
+import { H1, H2, H3 } from '@theme/Headings';
 
 export default {
   title: 'Typography/Headings',

package/src/Headings/Headings.ts

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import { typography } from '../utils';
+import { typography } from '@theme/utils';
 
 export const H1 = styled.h1`
   color: var(--color-content);

package/src/Headings/__tests__/Headings.test.tsx

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

package/src/JsonViewer/JsonViewer.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 
-import { JsonViewer } from './JsonViewer';
+import { JsonViewer } from '@theme/JsonViewer';
 
 export default {
   title: 'JsonViewer',

package/src/JsonViewer/JsonViewer.tsx

@@ -1,13 +1,12 @@
 import React, { memo, useRef, ReactElement } from 'react';
 import styled from 'styled-components';
 
-import { CopyButtonWrapper } from '../CopyButton';
-import { SampleControls, SamplesControlButton } from '../SamplesPanelControls';
-import { jsonToHTML } from '../utils';
-import { useMount, useUnmount } from '../hooks';
-import { CodeBlock } from '../CodeBlock';
-
-import { jsonStyles } from './styled';
+import { CopyButtonWrapper } from '@theme/CopyButton';
+import { SampleControls, SamplesControlButton } from '@theme/SamplesPanelControls';
+import { jsonToHTML } from '@theme/utils';
+import { useMount, useUnmount } from '@theme/hooks';
+import { CodeBlock } from '@theme/CodeBlock';
+import { jsonStyles } from '@theme/JsonViewer/styled';
 
 export interface JsonProps {
   data: any;

package/src/JsonViewer/__tests__/JsonViewer.test.tsx

@@ -2,7 +2,8 @@ import { fireEvent, screen } from '@testing-library/react';
 import React from 'react';
 
 import { renderWithTheme } from '../../../tests/utils';
-import { JsonViewer } from '../JsonViewer';
+
+import { JsonViewer } from '@theme/JsonViewer';
 
 const data = {
   id: '600dc3b5d617e547a0e74cb9',

package/src/JsonViewer/index.ts

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

package/src/Layout/PageLayout.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import styled from 'styled-components';
+
+interface PageLayoutProps {
+  sidebar?: React.ReactNode;
+}
+
+export default function PageLayout({
+  sidebar,
+  children,
+}: React.PropsWithChildren<PageLayoutProps>): JSX.Element {
+  return (
+    <Container data-component-name="Layout/PageLayout">
+      {sidebar}
+      <ContentContainer>{children}</ContentContainer>
+    </Container>
+  );
+}
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: row;
+  min-height: calc(100vh - var(--navbar-height));
+`;
+
+const ContentContainer = styled.div`
+  flex: 1 0 0;
+  /*
+    flex-basis is ignored for nested flex in Chrome, need to set width
+    See more here: https://stackoverflow.com/a/34355447
+  */
+  width: 0;
+  max-width: 100%;
+`;

package/src/Layout/RootLayout.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import styled from 'styled-components';
+
+interface LayoutConfig {
+  navbar: React.ReactNode;
+  footer: React.ReactNode;
+}
+
+const Wrapper = styled.div``;
+
+export default function RootLayout({
+  navbar,
+  footer,
+  children,
+}: React.PropsWithChildren<LayoutConfig>): JSX.Element {
+  return (
+    // TODO: rewrite it to avoid passing components as props
+    <Wrapper data-component-name="Layout/RootLayout">
+      {navbar}
+      {children}
+      {footer}
+    </Wrapper>
+  );
+}

package/src/Layout/index.tsx

@@ -0,0 +1,2 @@
+export { default as RootLayout } from './RootLayout';
+export { default as PageLayout } from './PageLayout';

package/src/Logo/Logo.tsx

@@ -2,13 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 
 import { Link } from '@portal/Link';
-
-export interface LogoConfig {
-  image?: string;
-  altText?: string;
-  link?: string;
-  favicon?: string;
-}
+import { LogoConfig } from '@theme/types/portal';
 
 export function Logo({ logo }: { logo: LogoConfig }): JSX.Element | null {
   const img = <NavLogo src={logo.image} alt={logo.altText} data-component-name="Logo/Logo" />;

package/src/Markdown/Admonition/Admonition.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { AlertIcon } from '@theme/ui/AlertIcon';
+
+interface AdmonitionTypeProps {
+  type: 'warning' | 'success' | 'danger' | 'attention' | 'info';
+}
+
+interface AdmonitionProps extends Partial<AdmonitionTypeProps> {
+  name?: string;
+}
+
+export function Admonition({
+  type = 'info',
+  name,
+  children,
+}: React.PropsWithChildren<AdmonitionProps>): JSX.Element {
+  return (
+    <Wrapper type={type} data-component-name="Markdown/Admonition/Admonition">
+      <AlertIcon type={type} />
+      {name ? <Heading type={type}>{name}</Heading> : null}
+      <Content>{children}</Content>
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div<AdmonitionTypeProps>`
+  position: relative;
+  align-items: center;
+  margin: var(--alert-margin-vertical) var(--alert-margin-horizontal);
+  padding: var(--alert-padding-vertical) var(--alert-padding-horizontal);
+  padding-left: calc(var(--alert-padding-horizontal) * 2 + var(--alert-icon-size));
+  border-radius: var(--alert-border-radius);
+  font-size: var(--alert-font-size);
+  font-weight: var(--alert-font-weight);
+  line-height: var(--alert-line-height);
+
+  ${({ type }) => `
+    background-color: var(--alert-${type}-background-color);
+    color: var(--alert-${type}-text-color);
+  `}
+`;
+
+const Heading = styled.h5<AdmonitionTypeProps>`
+  display: block;
+  margin: 0 0 10px;
+
+  letter-spacing: var(--alert-heading-letter-spacing);
+  color: ${({ type }) => `var(--alert-${type}-heading-color)`};
+
+  && {
+    font-size: var(--alert-heading-font-size);
+    font-weight: var(--alert-heading-font-weight);
+    line-height: var(--alert-line-height);
+    transform: var(--alert-heading-transform);
+  }
+`;
+
+const Content = styled.div`
+  & > p:first-child {
+    margin-top: 0;
+  }
+`;

package/src/Markdown/CodeSample/CodeSample.tsx

@@ -0,0 +1,39 @@
+import React, { useState } from 'react';
+
+import { ClipboardService } from '@theme/utils/ClipboardService';
+import {
+  Wrapper,
+  DoneIndicator,
+  CopyCodeButton,
+  CodeSampleButtonContainer,
+} from '@theme/Markdown/CodeSample/styled';
+
+type CodeSampleProps = {
+  language: string;
+  highlighted: string;
+  rawContent: string;
+};
+
+export function CodeSample({ rawContent, highlighted, language }: CodeSampleProps): JSX.Element {
+  const langClassName = language ? `language-${language}` : '';
+
+  const [isCopied, setIsCopied] = useState(false);
+
+  const copyCode = (code: string) => {
+    ClipboardService.copyCustom(code);
+    setIsCopied(true);
+    setTimeout(() => setIsCopied(false), 1500);
+  };
+
+  return (
+    <Wrapper className="code-sample" data-component-name="Markdown/CodeSample/CodeSample">
+      <CodeSampleButtonContainer onClick={() => copyCode(rawContent)}>
+        {!isCopied && <CopyCodeButton title="Copy the code snippet">Copy</CopyCodeButton>}
+        {isCopied && <DoneIndicator>Copied</DoneIndicator>}
+      </CodeSampleButtonContainer>
+      <pre className={langClassName}>
+        <code className={langClassName} dangerouslySetInnerHTML={{ __html: highlighted }} />
+      </pre>
+    </Wrapper>
+  );
+}