@redocly/theme 0.0.0-react18-20231120182601

package/lib/components/Catalog/Catalog.js

@@ -0,0 +1,178 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CatalogPageDescriptionWrapper = exports.CatalogPageWrapper = exports.CatalogDescription = exports.CatalogTitle = exports.CatalogPageContent = exports.FilterControls = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Highlight_1 = require("../../ui/Highlight");
+const H2_1 = require("../../components/Typography/H2");
+const Catalog_1 = require("../../components/Catalog");
+const index_1 = require("../../mocks/hooks/index");
+const FilterTags_1 = require("../../components/Filter/FilterTags");
+const FilterContent_1 = require("../../components/Filter/FilterContent");
+const FilterPopover_1 = require("../../components/Filter/FilterPopover");
+const Button_1 = require("../../components/Button");
+const PlusIcon_1 = require("../../icons/PlusIcon");
+const useModalScrollLock_1 = __importDefault(require("../../hooks/useModalScrollLock"));
+function Catalog(props) {
+    const { catalogConfig } = props.pageProps;
+    const items = (0, index_1.usePageSharedData)('catalog');
+    const { filterTerm, setFilterTerm, groups, filters } = (0, Catalog_1.useCatalog)(items, catalogConfig);
+    const [isAddingFilter, setIsAddingFilter] = react_1.default.useState(false);
+    const { translate } = (0, index_1.useTranslate)();
+    (0, useModalScrollLock_1.default)(isAddingFilter);
+    return (react_1.default.createElement(Highlight_1.HighlightContext.Provider, { value: [filterTerm] },
+        react_1.default.createElement(exports.CatalogPageWrapper, { withoutFilters: !filters.length },
+            !!filters.length && (react_1.default.createElement(FilterTagsWrapper, null,
+                react_1.default.createElement(Button_1.Button, { variant: "text", size: "small", icon: react_1.default.createElement(PlusIcon_1.PlusIcon, null), onClick: () => setIsAddingFilter(true) }, translate('theme.catalog.filters.select.addFilter', 'Add filter')),
+                react_1.default.createElement(FilterTags_1.FilterTags, { filters: filters }))),
+            react_1.default.createElement(FilterContent_1.FilterContent, { setFilterTerm: setFilterTerm, filters: filters, filterTerm: filterTerm, isMobile: false, filterValuesCasing: catalogConfig.filterValuesCasing }),
+            isAddingFilter && (react_1.default.createElement(FilterPopover_1.FilterPopover, { setIsAddingFilter: setIsAddingFilter, filters: filters, filterValuesCasing: catalogConfig.filterValuesCasing })),
+            react_1.default.createElement(exports.CatalogPageContent, null,
+                react_1.default.createElement(exports.CatalogPageDescriptionWrapper, null,
+                    catalogConfig.title ? (react_1.default.createElement(exports.CatalogTitle, null,
+                        ' ',
+                        translate(catalogConfig.titleTranslationKey, catalogConfig.title),
+                        ' ')) : null,
+                    catalogConfig.description ? (react_1.default.createElement(exports.CatalogDescription, null,
+                        ' ',
+                        translate(catalogConfig.descriptionTranslationKey, catalogConfig.description),
+                        ' ')) : null),
+                groups.map((group) => (react_1.default.createElement(react_1.default.Fragment, { key: group.title },
+                    react_1.default.createElement(CatalogSeparator, { "data-cy": "catalog-separator" },
+                        react_1.default.createElement(CatalogSeparatorLabel, null, group.title),
+                        react_1.default.createElement(CatalogSeparatorCount, null, group.items.length)),
+                    react_1.default.createElement(CatalogCards, null, group.items.map((item) => (react_1.default.createElement(Catalog_1.CatalogCard, { item: item, key: item.link })))))))))));
+}
+exports.default = Catalog;
+const CatalogSeparator = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  color: var(--catalog-separator-color);
+  font-size: var(--catalog-separator-font-size);
+  font-weight: var(--catalog-separator-font-weight);
+  border-top: 1px solid var(--catalog-separator-border-color);
+  margin: var(--catalog-separator-margin);
+  padding: var(--catalog-separator-padding);
+`;
+const CatalogSeparatorLabel = styled_components_1.default.div `
+  margin: var(--catalog-separator-label-margin);
+`;
+const CatalogSeparatorCount = styled_components_1.default.div `
+  display: flex;
+  height: var(--catalog-separator-count-height);
+  padding: var(--catalog-separator-count-padding);
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border-radius: var(--catalog-separator-count-border-radius);
+  border: 1px solid var(--catalog-separator-count-border-color);
+  background: var(--catalog-separator-count-background);
+`;
+exports.FilterControls = styled_components_1.default.div `
+  padding: var(--mobile-catalog-filter-padding-vertical)
+    var(--mobile-catalog-filter-padding-horizontal);
+  border-bottom: 1px solid var(--border-secondary);
+  background: var(--bg-raised);
+`;
+exports.CatalogPageContent = styled_components_1.default.main `
+  flex: 1;
+  width: 90%;
+  margin: 0 auto;
+  padding: 0;
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    width: 100%;
+    padding: var(--catalog-page-padding);
+  }
+`;
+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;
+  margin: var(--catalog-cards-group-margin);
+`;
+exports.CatalogTitle = (0, styled_components_1.default)(H2_1.H2) `
+  color: var(--catalog-title-text-color);
+  font-weight: var(--catalog-title-font-weight);
+  font-size: var(--catalog-title-font-size);
+  margin: var(--catalog-title-margin);
+`;
+exports.CatalogDescription = styled_components_1.default.p `
+  color: var(--catalog-description-text-color);
+  font-weight: var(--catalog-description-font-weight);
+  font-size: var(--catalog-description-font-size);
+  margin: var(--catalog-description-margin);
+`;
+exports.CatalogPageWrapper = styled_components_1.default.div `
+  --sidebar-width: var(--catalog-sidebar-width, 285px);
+
+  display: flex;
+  flex-direction: column;
+
+  font-weight: var(--font-weight-regular);
+
+  color: var(--text-secondary);
+  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-primary);
+  }
+  a:not([role='button']) {
+    text-decoration: none;
+    color: var(--link-text-color);
+    font-weight: var(--link-font-weight);
+  }
+
+  padding: ${({ withoutFilters }) => (withoutFilters ? 'var(--spacing-base) 0 0 0' : '0')};
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    flex-direction: row;
+    padding: 0;
+  }
+`;
+const FilterTagsWrapper = styled_components_1.default.div.attrs({ 'data-cy': 'Catalog/FilterTags' }) `
+  width: 90%;
+  margin: 0 auto;
+  padding: var(--filter-tags-wrapper-padding);
+  display: flex;
+  overflow-x: scroll;
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    display: none;
+  }
+
+  ${Button_1.Button} {
+    margin: var(--filter-add-button-margin);
+    padding: var(--filter-add-button-padding);
+    font-size: var(--filter-add-button-font-size);
+    font-weight: var(--filter-add-button-font-weight);
+    color: var(--text-secondary);
+    display: flex;
+    white-space: nowrap;
+
+    svg {
+      fill: var(--text-primary);
+    }
+
+    &:hover {
+      color: var(--text-primary);
+    }
+  }
+`;
+exports.CatalogPageDescriptionWrapper = styled_components_1.default.div `
+  margin: var(--catalog-heading-margin);
+  display: none;
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    display: block;
+  }
+`;
+//# 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,167 @@
+"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 Tag_1 = require("../../components/Tag");
+const icons_1 = require("../../icons");
+const telemetry_1 = require("../../mocks/telemetry");
+const utils_1 = require("../../utils");
+const Card_1 = require("../../components/Scorecard/Card");
+function CatalogCard({ item }) {
+    var _a, _b;
+    const hasTags = item.scorecardLevel || ((_a = item.tags) === null || _a === void 0 ? void 0 : _a.length);
+    return (React.createElement(Link_1.Link, { key: item.docsLink || item.link, to: item.docsLink || item.link },
+        React.createElement(StyledCard, { onClick: () => telemetry_1.telemetry.send('catalog_item_clicked', {}) },
+            React.createElement(CardTitle, null,
+                React.createElement(Highlight_1.Highlight, null, item.title)),
+            React.createElement(CardContent, null,
+                React.createElement(CardDescription, null,
+                    React.createElement(Highlight_1.Highlight, null, (_b = item.description) !== null && _b !== void 0 ? _b : '')),
+                React.createElement(CardFooter, null,
+                    hasTags && (React.createElement(CardTags, null,
+                        (item.tags || []).map((tag, index) => (React.createElement(CardTag, { key: tag + index, color: (0, utils_1.slug)(tag) },
+                            React.createElement(Highlight_1.Highlight, null, (0, utils_1.capitalize)(tag))))),
+                        (item.scorecardLevel && (React.createElement(StatusDot, { color: (0, Card_1.getLevelColor)(item.scorecardLevelIdx || -1, Object.keys(item.scorecardLevels || {}).length) },
+                            React.createElement(Highlight_1.Highlight, null, item.scorecardLevel)))) ||
+                            null)),
+                    React.createElement(SelectButton, null,
+                        React.createElement(icons_1.PointingArrowIcon, null)))))));
+}
+exports.CatalogCard = CatalogCard;
+const SelectButton = styled_components_1.default.div `
+  border: 1px solid var(--catalog-card-button-border-color);
+  border-radius: 100%;
+  min-width: var(--catalog-card-button-width);
+  width: var(--catalog-card-button-width);
+  height: var(--catalog-card-button-height);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease-in-out;
+
+  svg {
+    fill: var(--catalog-card-icon-color);
+  }
+`;
+const StyledCard = styled_components_1.default.div.attrs({ 'data-cy': 'Catalog/CatalogCard' }) `
+  min-height: var(--catalog-card-min-height);
+  height: 100%;
+  color: var(--catalog-card-text-color);
+  font-size: var(--catalog-card-font-size);
+  font-weight: var(--catalog-card-font-weight);
+  background-color: var(--catalog-card-background-color);
+  border: var(--catalog-card-border-width) var(--catalog-card-border-style) var(--catalog-card-border-color);
+  transition: all 0.2s ease-in-out;
+  border-radius: var(--catalog-card-border-radius);
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+
+  &:hover {
+    border-color: var(--catalog-card-hover-border-color);
+
+    ${SelectButton} {
+      transform: rotate(-45deg);
+      border-color: var(--catalog-card-hover-border-color);
+      background: var(--catalog-card-button-hover-background);
+
+      svg {
+        fill: var(--catalog-card-icon-hover-color);
+      }
+    }
+`;
+const CardTitle = styled_components_1.default.h4 `
+  color: var(--catalog-card-title-color);
+  min-height: var(--catalog-card-title-min-height);
+  font-size: var(--catalog-card-title-font-size);
+  font-weight: var(--catalog-card-title-font-weight);
+  margin: 0;
+  padding: var(--catalog-card-title-padding-vertical) var(--catalog-card-title-padding-horizontal);
+`;
+const CardDescription = styled_components_1.default.div `
+  display: -webkit-box;
+  -webkit-line-clamp: var(--catalog-card-description-line-clamp);
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-bottom: var(--catalog-card-description-margin-bottom);
+`;
+const CardContent = styled_components_1.default.div `
+  background-color: var(--catalog-card-content-background-color);
+  border-radius: var(--catalog-card-content-border-radius);
+  padding: var(--catalog-card-content-padding);
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+`;
+const CardFooter = styled_components_1.default.div `
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+`;
+const CardTags = styled_components_1.default.div `
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-xxs);
+  min-height: var(--spacing-xl);
+`;
+const CardTag = (0, styled_components_1.default)(Tag_1.Tag) `
+  display: block;
+  text-transform: inherit;
+  margin: 0;
+`;
+const StatusDot = styled_components_1.default.div `
+  font-size: var(--font-size-base);
+  font-style: normal;
+  font-weight: 400;
+  line-height: 22px;
+  display: flex;
+  align-items: center;
+  &:not(:only-child) {
+    margin-left: 4px;
+  }
+
+  ${({ color }) => color &&
+    `
+  &::before {
+    content: '';
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background-color: ${color};
+    margin-right: 8px;
+  }`};
+`;
+//# sourceMappingURL=CatalogCard.js.map

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

@@ -0,0 +1,4 @@
+export * from '../../components/Catalog/Catalog';
+export * from '../../components/Catalog/CatalogCard';
+export * from '../../components/Catalog/useCatalog';
+export * from '../../components/Catalog/styledVariables';

package/lib/components/Catalog/index.js

@@ -0,0 +1,21 @@
+"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/Catalog/Catalog"), exports);
+__exportStar(require("../../components/Catalog/CatalogCard"), exports);
+__exportStar(require("../../components/Catalog/useCatalog"), exports);
+__exportStar(require("../../components/Catalog/styledVariables"), exports);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+export declare const catalog: import("styled-components").FlattenSimpleInterpolation;

package/lib/components/Catalog/styledVariables.js

@@ -0,0 +1,97 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.catalog = void 0;
+const styled_components_1 = require("styled-components");
+exports.catalog = (0, styled_components_1.css) `
+  /* === Catalog === */
+  /**
+    * @tokens Catalog page
+    */
+  --catalog-page-padding-vertical: var(--spacing-lg);
+  --catalog-page-padding-horizontal: var(--spacing-xl);
+  --catalog-page-padding: var(--catalog-page-padding-vertical) var(--catalog-page-padding-horizontal);
+
+  --mobile-catalog-filter-padding-vertical: var(--spacing-sm);
+  --mobile-catalog-filter-padding-horizontal: var(--spacing-base);
+
+  --catalog-heading-margin: 0 0 var(--spacing-xl) 0;
+
+  /**
+    * @tokens Catalog page title
+    */
+  --catalog-title-text-color: var(--text-primary);
+  --catalog-title-font-weight: var(--font-weight-bold);
+  --catalog-title-font-size: var(--font-size-heading-3);
+  --catalog-title-margin: 0 0 var(--spacing-sm) 0;
+
+  /**
+    * @tokens Catalog page description
+    */
+  --catalog-description-text-color: var(--text-secondary);
+  --catalog-description-font-weight: var(--font-weight-regular);
+  --catalog-description-font-size: var(--font-size-base);
+  --catalog-description-margin: 0 0 var(--spacing-sm) 0;
+
+  /**
+    * @tokens Catalog page separator
+    */
+  --catalog-separator-color: var(--text-secondary);
+  --catalog-separator-font-size: var(--font-size-base);
+  --catalog-separator-font-weight: var(--font-weight-regular);
+  --catalog-separator-border-color: var(--border-secondary);
+  --catalog-separator-margin: 0 0 var(--spacing-base) 0;
+  --catalog-separator-padding: var(--spacing-xxs) 0 0 0;
+  --catalog-separator-label-margin: 0 var(--spacing-xs);
+  --catalog-separator-count-height: var(--control-height-xs);
+  --catalog-separator-count-padding: 0 var(--spacing-xxs);
+  --catalog-separator-count-border-radius: var(--border-radius-xlg);
+  --catalog-separator-count-border-color: var(--border-primary);
+  --catalog-separator-count-background: var(--bg-overlay);
+
+  /**
+    * @tokens Catalog card
+    */
+  --catalog-card-min-height: 214px;
+  --catalog-card-text-color: var(--text-secondary);
+  --catalog-card-font-size: var(--font-size-base);
+  --catalog-card-font-weight: var(--font-weight-regular);
+  --catalog-card-background-color: var(--bg-raised);
+  --catalog-card-border-color: var(--border-secondary);
+  --catalog-card-border-width: var(--border-width);
+  --catalog-card-border-style: var(--border-style);
+  --catalog-card-hover-border-color: var(--border-primary);
+  --catalog-card-border-radius: var(--border-radius-lg);
+
+  /**
+    * @tokens Catalog card button
+    */
+  --catalog-card-icon-color: var(--text-secondary);
+  --catalog-card-icon-hover-color: var(--text-primary);
+  --catalog-card-button-hover-background: var(--bg-overlay);
+  --catalog-card-button-height: var(--spacing-xl);
+  --catalog-card-button-width: var(--spacing-xl);
+  --catalog-card-button-border-color: var(--border-secondary);
+  --catalog-cards-group-margin: 0 0 var(--spacing-base) 0;
+
+  /**
+    * @tokens Catalog card title
+    */
+  --catalog-card-title-color: var(--text-primary);
+  --catalog-card-title-min-height: calc(var(--spacing-unit) * 18);
+  --catalog-card-title-font-size: var(--font-size-lg);
+  --catalog-card-title-font-weight: var(--font-weight-bold);
+  --catalog-card-title-padding-vertical: var(--spacing-sm);
+  --catalog-card-title-padding-horizontal: var(--spacing-base);
+
+  /**
+    * @tokens Catalog card description
+    */
+  --catalog-card-description-line-clamp: 3;
+  --catalog-card-description-margin-bottom: var(--spacing-base);
+  --catalog-card-content-background-color: var(--bg-base);
+  --catalog-card-content-border-radius: var(--border-radius-lg);
+  --catalog-card-content-padding: var(--spacing-base);
+  
+  // @tokens End
+`;
+//# sourceMappingURL=styledVariables.js.map

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

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