@redocly/theme 0.10.0 → 0.11.1

package/lib/components/ApiOnboarding/AppCustomAttributes.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppCustomAttributes = void 0;
+// Do not remove this component. It's for ejecting.
+// Some customers need to add custom attributes to a form in dev onboarding plugin, so they can just eject this component and add those attributes there
+function AppCustomAttributes(_props) {
+    return null;
+}
+exports.AppCustomAttributes = AppCustomAttributes;
+//# sourceMappingURL=AppCustomAttributes.js.map

package/lib/components/Button/Button.js

@@ -0,0 +1,156 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = exports.baseButtonStyles = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importStar(require("styled-components"));
+const Link_1 = require("../../mocks/Link");
+const getBlink = () => (0, styled_components_1.keyframes) `
+  0% {
+    color: var(--button-color);
+    background-color: var(--button-active-background-color);
+  }
+
+  50% {
+    background-color: var(--button-background-color);
+  }
+
+  100% {
+    color: var(--button-color);
+    background-color: var(--button-active-background-color);
+  }
+`;
+const getSize = (size = 'medium') => (0, styled_components_1.css) `
+  font-size: var(--button-${size}-font-size);
+  padding: var(--button-${size}-padding);
+  min-width: var(--button-${size}-min-width);
+`;
+exports.baseButtonStyles = (0, styled_components_1.css) `
+  outline: none;
+  border: none;
+  border-radius: var(--button-border-radius);
+  font-weight: var(--button-font-weight);
+  font-size: 14px;
+  padding: 2px 20px;
+  margin: var(--button-margin);
+  cursor: pointer;
+  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);
+
+  &:hover {
+    box-shadow: var(--button-hover-box-shadow);
+  }
+
+  &:active {
+    box-shadow: var(--button-active-box-shadow);
+  }
+`;
+const StyledButton = styled_components_1.default.button.attrs(({ color = 'default', extraClass, variant }) => ({
+    className: `button-color-${color}${variant ? ` button-variant-${variant}` : ''}${extraClass ? ` ${extraClass}` : ''}`,
+    'data-component-name': 'Button/Button',
+})) `
+  text-decoration: none;
+  text-align: center;
+
+  width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
+
+  ${exports.baseButtonStyles}
+
+  ${({ variant }) => variant === 'outlined'
+    ? (0, styled_components_1.css) `
+          color: var(--button-background-color);
+          border: 2px solid var(--button-border-color);
+          background-color: transparent;
+          &:hover {
+            color: var(--button-hover-background-color);
+            border: 2px solid var(--button-hover-border-color);
+          }
+
+          &:active {
+            color: var(--button-active-background-color);
+            border: 2px solid var(--button-active-border-color);
+          }
+
+          &:disabled {
+            color: var(--button-disabled-color);
+            background-color: transparent;
+          }
+        `
+    : (0, styled_components_1.css) `
+          color: var(--button-color);
+          border: 2px solid var(--button-background-color);
+          background-color: var(--button-background-color);
+          &:hover {
+            border: 2px solid var(--button-hover-background-color);
+            background-color: var(--button-hover-background-color);
+          }
+
+          &:active {
+            border: 2px solid var(--button-active-background-color);
+            background-color: var(--button-active-background-color);
+          }
+        `};
+
+  ${({ size }) => getSize(size)}
+
+  & + & {
+    margin-left: 0.85em;
+  }
+
+  ${({ blinking }) => blinking &&
+    (0, styled_components_1.css) `
+      pointer-events: none;
+      animation: ${getBlink()} 1.2s infinite;
+    `}
+
+  ${({ disabled }) => disabled &&
+    (0, styled_components_1.css) `
+      &,
+      &:hover {
+        cursor: default;
+        color: var(--button-disabled-color);
+        background-color: var(--button-disabled-background-color);
+        border-color: var(--button-disabled-background-color);
+        pointer-events: none;
+      }
+    `}
+`;
+const ButtonComponent = (props) => {
+    if (props.to) {
+        return (react_1.default.createElement(Link_1.Link, { to: props.to },
+            react_1.default.createElement(StyledButton, Object.assign({}, props))));
+    }
+    else {
+        return react_1.default.createElement(StyledButton, Object.assign({}, props));
+    }
+};
+exports.Button = (0, styled_components_1.default)(ButtonComponent) ``;
+//# sourceMappingURL=Button.js.map

package/lib/components/Button/index.d.ts

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

package/lib/components/Button/index.js

@@ -0,0 +1,18 @@
+"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("../../components/Button/Button"), exports);
+//# sourceMappingURL=index.js.map

package/lib/components/Cards/Card.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { ResolvedNavItem } from '../../types/portal';
+export interface CardProps {
+    title?: string;
+    icon?: string;
+    links: ResolvedNavItem;
+}
+export declare function Card(props: CardProps): JSX.Element;

package/lib/components/Cards/Card.js

@@ -0,0 +1,36 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Card = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Link_1 = require("../../mocks/Link");
+const H3_1 = require("../../components/Typography/H3");
+function Card(props) {
+    return (react_1.default.createElement(CardWrapper, { "data-component-name": "Cards/Card" },
+        props.icon && react_1.default.createElement("img", { src: props === null || props === void 0 ? void 0 : props.icon, alt: props === null || props === void 0 ? void 0 : props.title }),
+        props.title && react_1.default.createElement(H3_1.H3, null, props.title),
+        props.links.items && (react_1.default.createElement(CardLinksList, null, props.links.items.map((item) => (react_1.default.createElement("li", { key: item.label },
+            react_1.default.createElement(Link_1.Link, { to: item.link }, item.label))))))));
+}
+exports.Card = Card;
+const CardWrapper = styled_components_1.default.div `
+  border-radius: 10px;
+  box-shadow: 0 10px 30px 0 rgba(35, 35, 35, 0.1);
+  padding: 20px;
+  margin: 0 20px 20px 0;
+  min-width: 25%;
+  font-family: var(--font-family-base);
+`;
+const CardLinksList = styled_components_1.default.ul `
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+
+  li {
+    margin-bottom: 10px;
+  }
+`;
+//# sourceMappingURL=Card.js.map

package/lib/components/Cards/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Card';
+export * from './CardsBlock';

package/lib/components/Cards/index.js

@@ -0,0 +1,19 @@
+"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("./Card"), exports);
+__exportStar(require("./CardsBlock"), exports);
+//# sourceMappingURL=index.js.map

package/lib/components/Catalog/Catalog.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { CatalogConfig } from '../../types/portal/src/shared/types/catalog';
+export default function Catalog(props: {
+    pageProps: {
+        catalogId: string;
+        catalogConfig: CatalogConfig;
+    };
+}): JSX.Element;

package/lib/components/Catalog/Catalog.js

@@ -0,0 +1,167 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Highlight_1 = require("../../ui/Highlight");
+const Button_1 = require("../../components/Button");
+const Filter_1 = require("../../components/Filter");
+const H2_1 = require("../../components/Typography/H2");
+const H3_1 = require("../../components/Typography/H3");
+const CatalogCard_1 = require("../../components/Catalog/CatalogCard");
+const index_1 = require("../../mocks/hooks/index");
+const useCatalog_1 = require("./useCatalog");
+function Catalog(props) {
+    const { catalogConfig } = props.pageProps;
+    const items = (0, index_1.usePageSharedData)('catalog');
+    const { filterTerm, setFilterTerm, groups, filters } = (0, useCatalog_1.useCatalog)(items, catalogConfig);
+    const [isFilterPanelFocused, setIsFilterPanelFocused] = react_1.default.useState(false);
+    return (react_1.default.createElement(Highlight_1.HighlightContext.Provider, { value: [filterTerm] },
+        react_1.default.createElement(CatalogPageWrapper, null,
+            react_1.default.createElement(CatalogPageSidebar, { isActiveInMobileMode: isFilterPanelFocused },
+                react_1.default.createElement(StyledInput, { placeholder: "Filter...", value: filterTerm, onFocus: () => setIsFilterPanelFocused(true), onChange: (e) => setFilterTerm(e.target.value) }),
+                filters.map((filter, idx) => (react_1.default.createElement(Filter_1.Filter, { filter: filter, key: filter.property + '-' + idx }))),
+                react_1.default.createElement(MobileStickyApplyFilters, null,
+                    react_1.default.createElement(Button_1.Button, { color: "secondary", onClick: () => setIsFilterPanelFocused(false) }, "Apply filters"))),
+            react_1.default.createElement(CatalogPageContent, null,
+                catalogConfig.title ? react_1.default.createElement(CatalogTitle, null,
+                    " ",
+                    catalogConfig.title,
+                    " ") : null,
+                catalogConfig.description ? (react_1.default.createElement(CatalogDescription, null,
+                    " ",
+                    catalogConfig.description,
+                    " ")) : null,
+                groups.map((group) => (react_1.default.createElement(react_1.default.Fragment, { key: group.title },
+                    react_1.default.createElement(H3_1.H3, null,
+                        group.title,
+                        " (",
+                        group.items.length,
+                        ")"),
+                    react_1.default.createElement(CatalogCards, null, group.items.map((item) => (react_1.default.createElement(CatalogCard_1.CatalogCard, { item: item, key: item.link })))))))))));
+}
+exports.default = Catalog;
+const MobileStickyApplyFilters = styled_components_1.default.div `
+  position: fixed;
+  display: none;
+  background-color: var(--sidebar-background-color);
+  bottom: 0;
+  padding: 16px 30px;
+  left: 0px;
+  right: 0px;
+
+  ${Button_1.Button} {
+    width: 100%;
+    margin: 0;
+  }
+`;
+const CatalogPageSidebar = styled_components_1.default.aside `
+  width: var(--sidebar-width);
+  border-right: 1px solid var(--sidebar-border-color);
+  padding: 20px 30px;
+  position: sticky;
+  top: var(--navbar-height);
+  height: calc(100vh - var(--navbar-height));
+  overflow: auto;
+
+  @media screen and (max-width: 767px) {
+    transition: height 0.2s ease-in-out;
+    width: 100%;
+    ${({ isActiveInMobileMode }) => isActiveInMobileMode ? 'padding-bottom: 66px;' : 'height: 76px;'};
+    background-color: var(--sidebar-background-color);
+    border-bottom: 1px solid var(--sidebar-border-color);
+    z-index: 100;
+
+    ${MobileStickyApplyFilters} {
+      display: ${({ isActiveInMobileMode }) => (isActiveInMobileMode ? 'block' : 'none')};
+    }
+  }
+`;
+const CatalogPageContent = styled_components_1.default.main `
+  flex: 1;
+  padding: 32px;
+`;
+const CatalogCards = styled_components_1.default.div `
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(var(--api-catalog-card-min-width), 1fr));
+  gap: 32px;
+`;
+const CatalogTitle = (0, styled_components_1.default)(H2_1.H2) `
+  && {
+    margin: 0;
+  }
+`;
+const CatalogDescription = styled_components_1.default.p `
+  margin: 16px 0 32px 0;
+  font-size: 16px;
+  color: var(--text-color-secondary);
+`;
+const CatalogPageWrapper = styled_components_1.default.div `
+  --sidebar-width: var(--catalog-sidebar-width, 300px);
+
+  display: flex;
+  flex-direction: row;
+
+  font-weight: var(--font-weight-regular);
+  padding: 0;
+
+  color: var(--text-color);
+  font-size: var(--font-size-base);
+  font-family: var(--font-family-base);
+  line-height: var(--line-height-base);
+
+  hr {
+    border: 0;
+    width: calc(100% + 48px);
+    margin: auto -24px 0 -24px;
+    border-top: 1px solid var(--border-color);
+  }
+  a:not([role='button']) {
+    text-decoration: none;
+    color: var(--link-text-color);
+    font-weight: var(--link-font-weight);
+  }
+
+  @media screen and (max-width: 767px) {
+    flex-direction: column;
+  }
+`;
+// TODO: merge this input with the input from reference docs
+// the on in ref docs is dark, needs separate variables most likely
+const StyledInput = styled_components_1.default.input `
+  border: 1px solid rgba(0, 0, 0, 0.23);
+  min-width: 200px;
+  outline-color: var(--color-primary-500);
+  width: 100%;
+
+  outline: none;
+  padding: var(--input-padding);
+  border-radius: var(--input-border-radius);
+  background-color: var(--input-background-color);
+  color: var(--text-color);
+  font-family: var(--input-font-family);
+  font-size: var(--input-font-size);
+  line-height: var(--input-line-height);
+
+  &::placeholder {
+    opacity: 0.6;
+    color: var(--text-color);
+  }
+
+  &:hover {
+    color: var(--text-color);
+    border: 1px solid rgba(0, 0, 0, 0.23);
+  }
+
+  &:focus {
+    color: var(--text-color);
+    border: 1px solid rgba(0, 0, 0, 0.23);
+  }
+
+  &:-webkit-autofill {
+    background-color: var(--input-background-color);
+  }
+`;
+//# sourceMappingURL=Catalog.js.map

package/lib/components/Catalog/CatalogCard.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { CatalogItem } from '../../types/portal/src/shared/types/catalog';
+export declare function CatalogCard({ item }: {
+    item: CatalogItem;
+}): JSX.Element;

package/lib/components/Catalog/CatalogCard.js

@@ -0,0 +1,113 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CatalogCard = void 0;
+const React = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Link_1 = require("../../mocks/Link");
+const Highlight_1 = require("../../ui/Highlight");
+const Tags_1 = require("../../components/Tags");
+function CatalogCard({ item }) {
+    var _a;
+    return (React.createElement(Link_1.Link, { key: item.docsLink || item.link, to: item.docsLink || item.link },
+        React.createElement(StyledCard, null,
+            React.createElement(CardTitle, null,
+                React.createElement(Highlight_1.Highlight, null, item.title)),
+            React.createElement(CardDescription, null,
+                React.createElement(Highlight_1.Highlight, null, (_a = item.description) !== null && _a !== void 0 ? _a : '')),
+            item.tags ? React.createElement(Tags_1.Tags, { tags: item.tags }) : null,
+            React.createElement("hr", null),
+            React.createElement(CardFooter, null, "View documentation"))));
+}
+exports.CatalogCard = CatalogCard;
+const StyledCard = styled_components_1.default.div `
+  min-height: 268px;
+  height: 100%;
+  box-shadow: var(--box-shadow);
+
+  display: flex;
+  flex-direction: column;
+
+  color: var(--text-color);
+  background-color: var(--thin-tile-background-color);
+  border-radius: 4px;
+
+  border: 1px solid var(--border-color);
+  box-shadow: 0px 0px 10px 0px rgba(35, 35, 35, 0.05);
+  transition: all 0.2s ease-in-out;
+
+  &:hover {
+    /* box-shadow: 0px 12px 30px 0px rgba(35, 35, 35, 0.2); */
+    box-shadow: 0px 10px 30px 0px rgba(35, 35, 35, 0.1);
+    border: 1px solid var(--border-color);
+    transform: translateY(-2px);
+  }
+
+  border-radius: 8px;
+  width: 100%;
+  padding: 24px 24px 0;
+  display: flex;
+  flex-direction: column;
+  cursor: pointer;
+`;
+const CardTitle = styled_components_1.default.h4 `
+  line-height: 26px;
+  letter-spacing: 0.8px;
+  font-size: 20px;
+  font-weight: var(--font-weight-bold);
+  margin: 0;
+  margin-bottom: 16px;
+`;
+const CardDescription = styled_components_1.default.div `
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: var(--line-height);
+  letter-spacing: 0px;
+  font-size: 16px;
+  color: var(--text-color-secondary);
+  text-align: inherit;
+  font-weight: 400;
+`;
+const CardFooter = styled_components_1.default.div `
+  height: 46px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  flex-direction: column;
+  font-size: 16px;
+  font-weight: var(--font-weight-bold);
+
+  a:hover & {
+    text-decoration: var(--link-hover-text-decoration);
+    color: var(--link-hover-text-color);
+  }
+`;
+//# sourceMappingURL=CatalogCard.js.map

package/lib/components/Catalog/useCatalog.d.ts

@@ -0,0 +1,3 @@
+import type { ResolvedNavItem } from '../../types/portal';
+import type { CatalogConfig, FilteredCatalog } from '../../types/portal/src/shared/types/catalog';
+export declare function useCatalog(items: ResolvedNavItem[], config: CatalogConfig): FilteredCatalog;