@redocly/theme 0.1.8 → 0.1.9

package/src/TableOfContent/TableOfContent.stories.tsx

@@ -0,0 +1,39 @@
+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}>Click</TableOfContent>
+);
+
+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 },
+  ],
+};

package/src/TableOfContent/TableOfContent.tsx

@@ -11,7 +11,7 @@ interface TableOfContentProps {
   tocMaxDepth: number;
 }
 
-export default function TableOfContent(props: TableOfContentProps): JSX.Element | null {
+export function TableOfContent(props: TableOfContentProps): JSX.Element | null {
   const { headings, tocMaxDepth } = props;
 
   const sidebar = useRef<HTMLDivElement | null>(null);

package/src/TableOfContent/index.ts

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

package/src/index.ts

@@ -13,3 +13,4 @@ export * from './hooks';
 export * from './utils';
 export * from './globalStyle';
 export * from './OperationBadge';
+export * from './TableOfContent';

package/src/ui/Dropdown.tsx

@@ -84,7 +84,7 @@ const DropDownLink = styled(Link)`
   color: var(--color-text-main);
 `;
 
-export default function Dropdown({ items, activeItem }: DropdownProps): JSX.Element {
+export function Dropdown({ items, activeItem }: DropdownProps): JSX.Element {
   const ref = useRef<HTMLDivElement>(null);
   const [isOpen, setIsOpen] = useState(false);
   const toggling = () => setIsOpen(!isOpen);

package/src/ui/Tiles/index.ts

@@ -0,0 +1,4 @@
+export * from './ThinTile';
+export * from './TileHeader';
+export * from './TileText';
+export * from './WideTile';

package/src/ui/UniversalLink.tsx

@@ -2,8 +2,8 @@ import * as React from 'react';
 import { useLocation, LinkProps } from 'react-router-dom';
 import styled from 'styled-components';
 
-import isUrl from '@theme/utils/isUrl';
-import replaceHashInColor from '@theme/utils/replaceHashInColor';
+import { isUrl } from '@theme/utils/isUrl';
+import { replaceHashInColor } from '@theme/utils/replaceHashInColor';
 import { Link } from '@portal/Link';
 
 const StyledExternalLink = styled.a`

package/src/ui/index.tsx

@@ -1,11 +1,16 @@
 import React from 'react';
-export * from '@theme/ui/Button';
+
+export * from '@theme/ui/Tiles';
+export * from '@theme/ui/AlertIcon';
+export * from '@theme/ui/Arrow';
+export * from '@theme/ui/Background';
 export * from '@theme/ui/Box';
+export * from '@theme/ui/Button';
+export * from '@theme/ui/Dropdown';
 export * from '@theme/ui/Flex';
 export * from '@theme/ui/Jumbotron';
 export * from '@theme/ui/Typography';
-export * from '@theme/ui/Tiles/WideTile';
-export * from '@theme/ui/Tiles/ThinTile';
+export * from '@theme/ui/UniversalLink';
 
 export const LandingLayout = ({ children }: React.PropsWithChildren<object>): React.ReactNode =>
   children;

package/src/utils/isUrl.ts

@@ -16,7 +16,7 @@ const nonLocalhostDomainRE = /^[^\s.]+\.\S{2,}$/;
  * @return {Boolean}
  */
 
-export default function isUrl(string: string): boolean {
+export function isUrl(string: string): boolean {
   if (typeof string !== 'string') {
     return false;
   }

package/src/utils/replaceHashInColor.ts

@@ -1,3 +1,3 @@
-export default function replaceHashInColor(color: string): string {
+export function replaceHashInColor(color: string): string {
   return color.replace('#', '%23');
 }

package/ui/Dropdown.d.ts

@@ -4,5 +4,5 @@ declare type DropdownProps = {
     items: Version[];
     activeItem: Version;
 };
-export default function Dropdown({ items, activeItem }: DropdownProps): JSX.Element;
+export declare function Dropdown({ items, activeItem }: DropdownProps): JSX.Element;
 export {};

package/ui/Dropdown.js

@@ -18,6 +18,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.Dropdown = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var styled_components_1 = __importDefault(require("styled-components"));
@@ -50,5 +51,5 @@ function Dropdown(_a) {
     }, [isOpen]);
     return ((0, jsx_runtime_1.jsxs)(DropDownContainer, __assign({ ref: ref, "data-component-name": "ui/Dropdown" }, { children: [(0, jsx_runtime_1.jsxs)(DropDownHeader, __assign({ onClick: toggling }, { children: [(activeItem === null || activeItem === void 0 ? void 0 : activeItem.label) || activeItem.version, (0, jsx_runtime_1.jsx)(IconWrapper, __assign({ className: isOpen ? 'active' : '' }, { children: (0, jsx_runtime_1.jsx)(Icon, {}) }))] })), isOpen && ((0, jsx_runtime_1.jsx)(DropDownList, { children: items.map(function (item) { return ((0, jsx_runtime_1.jsx)(ListItem, __assign({ className: activeItem.version === item.version ? 'active' : '', onClick: toggling }, { children: (0, jsx_runtime_1.jsx)(DropDownLink, __assign({ to: (item === null || item === void 0 ? void 0 : item.link) || '#' }, { children: (item === null || item === void 0 ? void 0 : item.label) || item.version })) }), (item === null || item === void 0 ? void 0 : item.link) + (item === null || item === void 0 ? void 0 : item.version))); }) }))] })));
 }
-exports.default = Dropdown;
+exports.Dropdown = Dropdown;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/ui/Tiles/index.d.ts

@@ -0,0 +1,4 @@
+export * from './ThinTile';
+export * from './TileHeader';
+export * from './TileText';
+export * from './WideTile';

package/ui/Tiles/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+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("./ThinTile"), exports);
+__exportStar(require("./TileHeader"), exports);
+__exportStar(require("./TileText"), exports);
+__exportStar(require("./WideTile"), exports);

package/ui/UniversalLink.js

@@ -22,12 +22,12 @@ exports.UniversalLink = exports.withPropsFilter = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_router_dom_1 = require("react-router-dom");
 var styled_components_1 = __importDefault(require("styled-components"));
-var isUrl_1 = __importDefault(require("../utils/isUrl"));
-var replaceHashInColor_1 = __importDefault(require("../utils/replaceHashInColor"));
+var isUrl_1 = require("../utils/isUrl");
+var replaceHashInColor_1 = require("../utils/replaceHashInColor");
 var Link_1 = require("../mocks/Link");
 var StyledExternalLink = styled_components_1.default.a(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  &.external-url {\n    position: relative;\n\n    :after {\n      content: '';\n      display: inline-block;\n      position: absolute;\n      background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' x='0' y='0' viewBox='0 0 100 125' enable-background='new 0 0 100 100' xml:space='preserve'%3E%3Cpath fill='", "' d='M-408.2-318.5 98.6 4.8c0-0.1 0-0.2-0.1-0.3 0-0.1-0.1-0.2-0.1-0.3 0-0.1 0-0.1-0.1-0.2 0 0 0-0.1 0-0.1 0-0.1-0.1-0.2-0.2-0.3 0-0.1-0.1-0.2-0.2-0.3 -0.1-0.1-0.1-0.2-0.2-0.3C97.7 2.9 97.6 2.8 97.5 2.7c-0.1-0.1-0.2-0.2-0.3-0.3 -0.1-0.1-0.1-0.1-0.2-0.2 -0.1-0.1-0.2-0.2-0.3-0.2 -0.1-0.1-0.2-0.1-0.2-0.2 -0.1-0.1-0.2-0.1-0.3-0.2 -0.1 0-0.2-0.1-0.3-0.1 0 0-0.1 0-0.1-0.1 -0.1 0-0.2 0-0.2-0.1 -0.1 0-0.2-0.1-0.3-0.1 -0.1 0-0.2-0.1-0.4-0.1 -0.1 0-0.2 0-0.3 0 -0.1 0-0.3 0-0.4 0 -0.1 0-0.1 0-0.2 0L63.8 1.3c-2.5 0-4.6 2.1-4.6 4.6 0 2.5 2.1 4.6 4.6 4.5l19.3-0.1 -29.8 30.2c-1.1 1.1-1.5 2.7-1.2 4.1 0.2 0.9 0.6 1.7 1.3 2.4 0.9 0.9 2.1 1.3 3.2 1.3 1.2 0 2.3-0.5 3.2-1.4l0 0 29.8-30.2 0.1 19.3c0 2.5 2.1 4.6 4.6 4.5 1.3 0 2.4-0.5 3.2-1.4 0.8-0.8 1.3-2 1.3-3.2L98.7 5.7c0-0.1 0-0.1 0-0.2 0-0.1 0-0.2 0-0.4C98.6 5 98.6 4.9 98.6 4.8zM6.5 83.3c0 5.7 4.6 10.4 10.4 10.4l55.6 0.1c5.7 0 10.4-4.6 10.4-10.4l-0.1-40.8h6.1v40.8c0 9-7.3 16.3-16.3 16.3l-56.4-0.1c-8.6 0-15.6-7-15.6-15.6L0.6 27.8c0-9 7.3-16.3 16.3-16.3l41.1-0.1v6.1L17 17.5c-5.7 0-10.4 4.6-10.4 10.4L6.5 83.3z'/%3E%3C/svg%3E\");\n      width: 10px;\n      height: 10px;\n      background-repeat: no-repeat;\n      top: 50%;\n      right: -15px;\n      transform: translateY(-50%);\n    }\n  }\n"], ["\n  &.external-url {\n    position: relative;\n\n    :after {\n      content: '';\n      display: inline-block;\n      position: absolute;\n      background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' x='0' y='0' viewBox='0 0 100 125' enable-background='new 0 0 100 100' xml:space='preserve'%3E%3Cpath fill='", "' d='M-408.2-318.5 98.6 4.8c0-0.1 0-0.2-0.1-0.3 0-0.1-0.1-0.2-0.1-0.3 0-0.1 0-0.1-0.1-0.2 0 0 0-0.1 0-0.1 0-0.1-0.1-0.2-0.2-0.3 0-0.1-0.1-0.2-0.2-0.3 -0.1-0.1-0.1-0.2-0.2-0.3C97.7 2.9 97.6 2.8 97.5 2.7c-0.1-0.1-0.2-0.2-0.3-0.3 -0.1-0.1-0.1-0.1-0.2-0.2 -0.1-0.1-0.2-0.2-0.3-0.2 -0.1-0.1-0.2-0.1-0.2-0.2 -0.1-0.1-0.2-0.1-0.3-0.2 -0.1 0-0.2-0.1-0.3-0.1 0 0-0.1 0-0.1-0.1 -0.1 0-0.2 0-0.2-0.1 -0.1 0-0.2-0.1-0.3-0.1 -0.1 0-0.2-0.1-0.4-0.1 -0.1 0-0.2 0-0.3 0 -0.1 0-0.3 0-0.4 0 -0.1 0-0.1 0-0.2 0L63.8 1.3c-2.5 0-4.6 2.1-4.6 4.6 0 2.5 2.1 4.6 4.6 4.5l19.3-0.1 -29.8 30.2c-1.1 1.1-1.5 2.7-1.2 4.1 0.2 0.9 0.6 1.7 1.3 2.4 0.9 0.9 2.1 1.3 3.2 1.3 1.2 0 2.3-0.5 3.2-1.4l0 0 29.8-30.2 0.1 19.3c0 2.5 2.1 4.6 4.6 4.5 1.3 0 2.4-0.5 3.2-1.4 0.8-0.8 1.3-2 1.3-3.2L98.7 5.7c0-0.1 0-0.1 0-0.2 0-0.1 0-0.2 0-0.4C98.6 5 98.6 4.9 98.6 4.8zM6.5 83.3c0 5.7 4.6 10.4 10.4 10.4l55.6 0.1c5.7 0 10.4-4.6 10.4-10.4l-0.1-40.8h6.1v40.8c0 9-7.3 16.3-16.3 16.3l-56.4-0.1c-8.6 0-15.6-7-15.6-15.6L0.6 27.8c0-9 7.3-16.3 16.3-16.3l41.1-0.1v6.1L17 17.5c-5.7 0-10.4 4.6-10.4 10.4L6.5 83.3z'/%3E%3C/svg%3E\");\n      width: 10px;\n      height: 10px;\n      background-repeat: no-repeat;\n      top: 50%;\n      right: -15px;\n      transform: translateY(-50%);\n    }\n  }\n"])), function (_a) {
     var theme = _a.theme;
-    return (0, replaceHashInColor_1.default)(theme.colors.text.primary);
+    return (0, replaceHashInColor_1.replaceHashInColor)(theme.colors.text.primary);
 });
 // TODO: We're using our own Link component so probably filtering is not necessary here.
 // filter out unnecessary props
@@ -56,7 +56,7 @@ var withPropsFilter = function (filterList) { return function (WrappedComponent)
 exports.withPropsFilter = withPropsFilter;
 exports.UniversalLink = (0, exports.withPropsFilter)(propsList)(function (props) {
     var _a;
-    return (typeof props.to === 'string' && ((0, isUrl_1.default)(props.to) || props.to.startsWith('mailto:'))) ||
+    return (typeof props.to === 'string' && ((0, isUrl_1.isUrl)(props.to) || props.to.startsWith('mailto:'))) ||
         props.external ? ((0, jsx_runtime_1.jsx)(StyledExternalLink, __assign({ style: props.style, href: props.to, target: props.target || (props.external && '_blank') || '_self', className: "".concat(props.external ? 'external-url' : '', " ").concat(props.className), rel: props.rel, "data-cy": "universalLink-".concat(typeof props.children === 'string' ? props.children : 'with-nested-jsx') }, { children: props.children }))) : props.to == null ? ((0, jsx_runtime_1.jsx)("a", __assign({ onClick: props.onClick, className: props.className, style: props.style }, { children: props.children }))) : ((0, jsx_runtime_1.jsx)(Link_1.Link, __assign({}, props, { to: props.to, state: __assign({ previousPath: (_a = (0, react_router_dom_1.useLocation)()) === null || _a === void 0 ? void 0 : _a.pathname }, props.state) })));
 });
 var templateObject_1;

package/ui/index.d.ts

@@ -1,10 +1,14 @@
 import React from 'react';
-export * from '../ui/Button';
+export * from '../ui/Tiles';
+export * from '../ui/AlertIcon';
+export * from '../ui/Arrow';
+export * from '../ui/Background';
 export * from '../ui/Box';
+export * from '../ui/Button';
+export * from '../ui/Dropdown';
 export * from '../ui/Flex';
 export * from '../ui/Jumbotron';
 export * from '../ui/Typography';
-export * from '../ui/Tiles/WideTile';
-export * from '../ui/Tiles/ThinTile';
+export * from '../ui/UniversalLink';
 export declare const LandingLayout: ({ children }: React.PropsWithChildren<object>) => React.ReactNode;
 export declare const EmptyLayout: ({ children }: React.PropsWithChildren<object>) => React.ReactNode;

package/ui/index.js

@@ -15,13 +15,17 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EmptyLayout = exports.LandingLayout = void 0;
-__exportStar(require("../ui/Button"), exports);
+__exportStar(require("../ui/Tiles"), exports);
+__exportStar(require("../ui/AlertIcon"), exports);
+__exportStar(require("../ui/Arrow"), exports);
+__exportStar(require("../ui/Background"), exports);
 __exportStar(require("../ui/Box"), exports);
+__exportStar(require("../ui/Button"), exports);
+__exportStar(require("../ui/Dropdown"), exports);
 __exportStar(require("../ui/Flex"), exports);
 __exportStar(require("../ui/Jumbotron"), exports);
 __exportStar(require("../ui/Typography"), exports);
-__exportStar(require("../ui/Tiles/WideTile"), exports);
-__exportStar(require("../ui/Tiles/ThinTile"), exports);
+__exportStar(require("../ui/UniversalLink"), exports);
 var LandingLayout = function (_a) {
     var children = _a.children;
     return children;

package/utils/isUrl.d.ts

@@ -9,4 +9,4 @@
  * @param {String} string
  * @return {Boolean}
  */
-export default function isUrl(string: string): boolean;
+export declare function isUrl(string: string): boolean;

package/utils/isUrl.js

@@ -5,6 +5,7 @@
  * Use two levels of REs to avoid REDOS.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.isUrl = void 0;
 var protocolAndDomainRE = /^(?:\w+:)?\/\/(\S+)$/;
 var localhostDomainRE = /^localhost[:?\d]*(?:[^:?\d]\S*)?$/;
 var nonLocalhostDomainRE = /^[^\s.]+\.\S{2,}$/;
@@ -32,4 +33,4 @@ function isUrl(string) {
     }
     return false;
 }
-exports.default = isUrl;
+exports.isUrl = isUrl;

package/utils/replaceHashInColor.d.ts

@@ -1 +1 @@
-export default function replaceHashInColor(color: string): string;
+export declare function replaceHashInColor(color: string): string;

package/utils/replaceHashInColor.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.replaceHashInColor = void 0;
 function replaceHashInColor(color) {
     return color.replace('#', '%23');
 }
-exports.default = replaceHashInColor;
+exports.replaceHashInColor = replaceHashInColor;

package/src/Footer/index.tsx

@@ -1,4 +0,0 @@
-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/Layout/index.tsx

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