@redocly/theme 0.19.2 → 0.19.4

package/lib/components/Button/Button.js

@@ -69,6 +69,7 @@ exports.baseButtonStyles = (0, styled_components_1.css) `
   font-family: var(--button-font-family);
   font-weight: var(--button-font-weight);
   box-shadow: var(--button-box-shadow);
+  text-wrap: var(--button-text-wrap);
 
   &:hover {
     box-shadow: var(--button-hover-box-shadow);

package/lib/components/Button/styledVariables.js

@@ -37,6 +37,8 @@ exports.button = (0, styled_components_1.css) `
   --button-large-font-size: var(--font-size-lg); // @presenter FontSize
   --button-large-padding: 8px 16px;
 
+  --button-text-wrap: nowrap;
+
   /**
     * @tokens Button icon
     */

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

@@ -10,5 +10,7 @@ export declare const FilterControls: import("styled-components").StyledComponent
 export declare const CatalogPageContent: import("styled-components").StyledComponent<"main", any, {}, never>;
 export declare const CatalogTitle: import("styled-components").StyledComponent<"h2", any, {}, never>;
 export declare const CatalogDescription: import("styled-components").StyledComponent<"p", any, {}, never>;
-export declare const CatalogPageWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CatalogPageWrapper: import("styled-components").StyledComponent<"div", any, {
+    withoutFilters?: boolean | undefined;
+}, never>;
 export declare const CatalogPageDescriptionWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/components/Catalog/Catalog.js

@@ -27,10 +27,10 @@ function Catalog(props) {
     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, null,
-            react_1.default.createElement(FilterTagsWrapper, null,
+        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(translationKeys.addFilter, 'Add filter')),
-                react_1.default.createElement(FilterTags_1.FilterTags, { filters: filters })),
+                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,
@@ -101,16 +101,13 @@ 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: 0;
-  }
+  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-top) 0 var(--catalog-description-margin-bottom) 0;
+  margin: var(--catalog-description-margin);
 `;
 exports.CatalogPageWrapper = styled_components_1.default.div `
   --sidebar-width: var(--catalog-sidebar-width, 285px);
@@ -119,7 +116,6 @@ exports.CatalogPageWrapper = styled_components_1.default.div `
   flex-direction: column;
 
   font-weight: var(--font-weight-regular);
-  padding: 0;
 
   color: var(--text-secondary);
   font-size: var(--font-size-base);
@@ -138,8 +134,11 @@ exports.CatalogPageWrapper = styled_components_1.default.div `
     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' }) `
@@ -172,6 +171,7 @@ const FilterTagsWrapper = styled_components_1.default.div.attrs({ 'data-cy': 'Ca
   }
 `;
 exports.CatalogPageDescriptionWrapper = styled_components_1.default.div `
+  margin: var(--catalog-heading-margin);
   display: none;
 
   ${({ theme }) => theme.mediaQueries.medium} {

package/lib/components/Catalog/styledVariables.js

@@ -14,12 +14,15 @@ exports.catalog = (0, styled_components_1.css) `
   --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
@@ -27,8 +30,7 @@ exports.catalog = (0, styled_components_1.css) `
   --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-top: var(--spacing-sm);
-  --catalog-description-margin-bottom: var(--spacing-xl);
+  --catalog-description-margin: 0 0 var(--spacing-sm) 0;
 
   /**
     * @tokens Catalog page separator

package/lib/components/Catalog/useCatalog.js

@@ -119,8 +119,8 @@ function useCatalog(items, config) {
     return React.useMemo(() => {
         var _a;
         const filters = filtersWithOptions.map((filter, idx) => {
-            var _a, _b, _c;
-            return (Object.assign(Object.assign({}, filter), { toggleOption: (value) => toggleOption(idx, value), selectOption: (value) => selectOption(idx, value), selectedOptions: (_a = filtersState[idx]) !== null && _a !== void 0 ? _a : new Set(), isFilterUsed: ((_c = (_b = filtersState[idx]) === null || _b === void 0 ? void 0 : _b.size) !== null && _c !== void 0 ? _c : 0) > 0 || !!filtersState[idx].from }));
+            var _a, _b, _c, _d;
+            return (Object.assign(Object.assign({}, filter), { toggleOption: (value) => toggleOption(idx, value), selectOption: (value) => selectOption(idx, value), selectedOptions: (_a = filtersState[idx]) !== null && _a !== void 0 ? _a : new Set(), isFilterUsed: ((_c = (_b = filtersState[idx]) === null || _b === void 0 ? void 0 : _b.size) !== null && _c !== void 0 ? _c : 0) > 0 || !!((_d = filtersState[idx]) === null || _d === void 0 ? void 0 : _d.from) }));
         });
         const filteredItems = filterItems(normalizedItems, filters, filterTerm);
         // add more information to filters state which is known only after filtering items

package/lib/components/Panel/styledVariables.js

@@ -445,6 +445,7 @@ exports.apiReferencePanels = (0, styled_components_1.css) `
   --panel-try-it-action-button-font-weight: var(--font-weight-bold); // @presenter FontWeight
   --panel-try-it-action-button-font-size: var(--panel-font-size); // @presenter FontSize
   --panel-try-it-action-button-text-color: var(--text-light-solid); // @presenter Color
+  --panel-try-it-action-button-text-wrap: var(--button-text-wrap);
   --panel-try-it-action-button-background-color: var(--color-primary); // @presenter Color
   --panel-try-it-action-button-border-color: var(--color-primary); // @presenter Color
 

package/lib/config.d.ts

@@ -356,7 +356,7 @@ declare const scorecardConfigSchema: {
 declare const catalogSchema: {
     readonly type: "object";
     readonly additionalProperties: true;
-    readonly required: readonly ["slug", "filters", "items"];
+    readonly required: readonly ["slug", "items"];
     readonly properties: {
         readonly slug: {
             readonly type: "string";
@@ -1590,7 +1590,7 @@ export declare const themeConfigSchema: {
                 readonly '.*': {
                     readonly type: "object";
                     readonly additionalProperties: true;
-                    readonly required: readonly ["slug", "filters", "items"];
+                    readonly required: readonly ["slug", "items"];
                     readonly properties: {
                         readonly slug: {
                             readonly type: "string";

package/lib/config.js

@@ -314,7 +314,7 @@ const scorecardConfigSchema = {
 const catalogSchema = {
     type: 'object',
     additionalProperties: true,
-    required: ['slug', 'filters', 'items'],
+    required: ['slug', 'items'],
     properties: {
         slug: { type: 'string' },
         filters: { type: 'array', items: catalogFilterSchema },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.19.2",
+  "version": "0.19.4",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",

package/src/components/Button/Button.tsx

@@ -65,6 +65,7 @@ export const baseButtonStyles = css`
   font-family: var(--button-font-family);
   font-weight: var(--button-font-weight);
   box-shadow: var(--button-box-shadow);
+  text-wrap: var(--button-text-wrap);
 
   &:hover {
     box-shadow: var(--button-hover-box-shadow);

package/src/components/Button/styledVariables.ts

@@ -35,6 +35,8 @@ export const button = css`
   --button-large-font-size: var(--font-size-lg); // @presenter FontSize
   --button-large-padding: 8px 16px;
 
+  --button-text-wrap: nowrap;
+
   /**
     * @tokens Button icon
     */

package/src/components/Catalog/Catalog.tsx

@@ -35,18 +35,20 @@ export default function Catalog(props: {
 
   return (
     <HighlightContext.Provider value={[filterTerm]}>
-      <CatalogPageWrapper>
-        <FilterTagsWrapper>
-          <Button
-            variant="text"
-            size="small"
-            icon={<PlusIcon />}
-            onClick={() => setIsAddingFilter(true)}
-          >
-            {translate(translationKeys.addFilter, 'Add filter')}
-          </Button>
-          <FilterTags filters={filters} />
-        </FilterTagsWrapper>
+      <CatalogPageWrapper withoutFilters={!filters.length}>
+        {!!filters.length && (
+          <FilterTagsWrapper>
+            <Button
+              variant="text"
+              size="small"
+              icon={<PlusIcon />}
+              onClick={() => setIsAddingFilter(true)}
+            >
+              {translate(translationKeys.addFilter, 'Add filter')}
+            </Button>
+            <FilterTags filters={filters} />
+          </FilterTagsWrapper>
+        )}
         <FilterContent
           setFilterTerm={setFilterTerm}
           filters={filters}
@@ -152,27 +154,23 @@ export const CatalogTitle = styled(H2)`
   color: var(--catalog-title-text-color);
   font-weight: var(--catalog-title-font-weight);
   font-size: var(--catalog-title-font-size);
-
-  && {
-    margin: 0;
-  }
+  margin: var(--catalog-title-margin);
 `;
 
 export const CatalogDescription = styled.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-top) 0 var(--catalog-description-margin-bottom) 0;
+  margin: var(--catalog-description-margin);
 `;
 
-export const CatalogPageWrapper = styled.div`
+export const CatalogPageWrapper = styled.div<{ withoutFilters?: boolean }>`
   --sidebar-width: var(--catalog-sidebar-width, 285px);
 
   display: flex;
   flex-direction: column;
 
   font-weight: var(--font-weight-regular);
-  padding: 0;
 
   color: var(--text-secondary);
   font-size: var(--font-size-base);
@@ -191,8 +189,11 @@ export const CatalogPageWrapper = styled.div`
     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;
   }
 `;
 
@@ -227,6 +228,7 @@ const FilterTagsWrapper = styled.div.attrs({ 'data-cy': 'Catalog/FilterTags' })`
 `;
 
 export const CatalogPageDescriptionWrapper = styled.div`
+  margin: var(--catalog-heading-margin);
   display: none;
 
   ${({ theme }) => theme.mediaQueries.medium} {

package/src/components/Catalog/styledVariables.ts

@@ -12,12 +12,15 @@ export const catalog = css`
   --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
@@ -25,8 +28,7 @@ export const catalog = css`
   --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-top: var(--spacing-sm);
-  --catalog-description-margin-bottom: var(--spacing-xl);
+  --catalog-description-margin: 0 0 var(--spacing-sm) 0;
 
   /**
     * @tokens Catalog page separator

package/src/components/Catalog/useCatalog.ts

@@ -121,7 +121,7 @@ export function useCatalog(items: ResolvedNavItem[], config: CatalogConfig): Fil
       selectOption: (value: string) => selectOption(idx, value),
       selectedOptions: filtersState[idx] ?? new Set<string>(),
       isFilterUsed:
-        ((filtersState[idx] as any)?.size ?? 0) > 0 || !!(filtersState[idx] as any).from,
+        ((filtersState[idx] as any)?.size ?? 0) > 0 || !!(filtersState[idx] as any)?.from,
     }));
 
     const filteredItems = filterItems(normalizedItems, filters, filterTerm);

package/src/components/Panel/styledVariables.ts

@@ -444,6 +444,7 @@ export const apiReferencePanels = css`
   --panel-try-it-action-button-font-weight: var(--font-weight-bold); // @presenter FontWeight
   --panel-try-it-action-button-font-size: var(--panel-font-size); // @presenter FontSize
   --panel-try-it-action-button-text-color: var(--text-light-solid); // @presenter Color
+  --panel-try-it-action-button-text-wrap: var(--button-text-wrap);
   --panel-try-it-action-button-background-color: var(--color-primary); // @presenter Color
   --panel-try-it-action-button-border-color: var(--color-primary); // @presenter Color
 

package/src/config.ts

@@ -354,7 +354,7 @@ const scorecardConfigSchema = {
 const catalogSchema = {
   type: 'object',
   additionalProperties: true,
-  required: ['slug', 'filters', 'items'],
+  required: ['slug', 'items'],
   properties: {
     slug: { type: 'string' },
     filters: { type: 'array', items: catalogFilterSchema },