@redocly/theme 0.18.3-patch.1 → 0.18.3-patch.2

package/lib/components/Catalog/Catalog.js

@@ -30,7 +30,7 @@ function Catalog(props) {
             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(FilterContent_1.FilterContent, { setFilterTerm: setFilterTerm, filters: filters, filterTerm: filterTerm, isMobile: false }),
+            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 })),
             react_1.default.createElement(CatalogPageContent, null,
                 react_1.default.createElement(CatalogPageDescriptionWrapper, null,

package/lib/components/Filter/Filter.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
 import type { ResolvedFilter } from '../../types/portal/src/shared/types/catalog';
-export declare function Filter({ filter }: {
+export declare function Filter({ filter, filterValuesCasing, }: {
     filter: ResolvedFilter & {
         selectedOptions: any;
     };
+    filterValuesCasing?: 'sentence';
 }): JSX.Element | null;

package/lib/components/Filter/Filter.js

@@ -10,7 +10,7 @@ const react_date_picker_1 = require("react-date-picker");
 const hooks_1 = require("../../mocks/hooks");
 const icons_1 = require("../../icons");
 const Select_1 = require("../../components/Select");
-function Filter({ filter }) {
+function Filter({ filter, filterValuesCasing, }) {
     var _a, _b;
     const { translate } = (0, hooks_1.useTranslate)();
     const translationKeys = {
@@ -33,7 +33,7 @@ function Filter({ filter }) {
         selectOptions.push(...filter.filteredOptions.map((option) => ({
             value: option.value,
             component: (react_1.default.createElement(FilterOption, { key: option.value, role: "link", onClick: () => filter.selectOption(option.value) },
-                react_1.default.createElement(FilterOptionLabel, null, translate(option.value)),
+                react_1.default.createElement(FilterOptionLabel, null, changeCasing(translate(option.value), filterValuesCasing)),
                 react_1.default.createElement(FilterOptionCount, null, option.count))),
         })));
     }
@@ -48,7 +48,7 @@ function Filter({ filter }) {
         react_1.default.createElement(FilterTitle, null,
             translate(filter.titleTranslationKey, filter.title),
             " "),
-        filter.type === 'select' ? (react_1.default.createElement(StyledSelect, { selected: selectedOptionComponent, options: selectOptions.map((option) => option.component) })) : filter.type === 'date-range' ? (react_1.default.createElement(react_1.default.Fragment, null,
+        filter.type === 'select' ? (react_1.default.createElement(StyledSelect, { withArrow: true, selected: selectedOptionComponent, options: selectOptions.map((option) => option.component) })) : filter.type === 'date-range' ? (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(DatePickerWrapper, null,
                 react_1.default.createElement("span", null, "From:"),
                 react_1.default.createElement(react_date_picker_1.DatePicker, { closeCalendar: true, format: "y-MM-dd", dayPlaceholder: "DD", monthPlaceholder: "MM", yearPlaceholder: "YYYY", value: filter.selectedOptions.from ? new Date(filter.selectedOptions.from) : null, minDetail: "decade", maxDate: new Date(), onChange: (from) => {
@@ -66,11 +66,17 @@ function Filter({ filter }) {
             const id = 'filter--' + filter.property + '--' + slug(value.value);
             return (react_1.default.createElement(FilterOption, { key: id, role: "link", onClick: () => filter.toggleOption(value.value) },
                 react_1.default.createElement(icons_1.CheckboxIcon, { checked: filter.selectedOptions.has(value.value) }),
-                react_1.default.createElement(FilterOptionLabel, null, translate(value.value)),
+                react_1.default.createElement(FilterOptionLabel, null, changeCasing(translate(value.value), filterValuesCasing)),
                 react_1.default.createElement(FilterOptionCount, null, value.count)));
         }))));
 }
 exports.Filter = Filter;
+function changeCasing(str, casing) {
+    if (casing !== 'sentence')
+        return str;
+    const words = str.split(/[\s-_]+/);
+    return words.map((word) => word[0].toUpperCase() + word.slice(1).toLowerCase()).join(' ');
+}
 const FilterGroup = styled_components_1.default.div `
   padding: var(--filter-group-padding);
 `;

package/lib/components/Filter/FilterContent.d.ts

@@ -5,7 +5,8 @@ interface FilterContentProps {
     filters: ResolvedFilter[];
     filterTerm: string;
     isMobile: boolean;
+    filterValuesCasing?: 'sentence';
 }
-export declare function FilterContent({ setFilterTerm, filters, filterTerm, isMobile, }: FilterContentProps): JSX.Element;
+export declare function FilterContent({ setFilterTerm, filters, filterTerm, isMobile, filterValuesCasing, }: FilterContentProps): JSX.Element;
 export declare const FilterItems: import("styled-components").StyledComponent<"div", any, {}, never>;
 export {};

package/lib/components/Filter/FilterContent.js

@@ -11,7 +11,7 @@ const hooks_1 = require("../../mocks/hooks");
 const Catalog_1 = require("../../components/Catalog");
 const index_1 = require("../../components/Filter/index");
 const FilterPopover_1 = require("../../components/Filter/FilterPopover");
-function FilterContent({ setFilterTerm, filters, filterTerm, isMobile, }) {
+function FilterContent({ setFilterTerm, filters, filterTerm, isMobile, filterValuesCasing, }) {
     const { translate } = (0, hooks_1.useTranslate)();
     const translationKeys = {
         placeholder: 'theme.catalog.filters.placeholder',
@@ -31,7 +31,7 @@ function FilterContent({ setFilterTerm, filters, filterTerm, isMobile, }) {
     return (react_1.default.createElement(FilterContentWrapper, { isMobile: isMobile },
         react_1.default.createElement(Catalog_1.FilterControls, null,
             react_1.default.createElement(FilterPopover_1.StyledInput, { placeholder: translate(translationKeys.placeholder, 'Type to filter...'), value: filterTerm, onChange: (e) => setFilterTerm(e.target.value) })),
-        react_1.default.createElement(exports.FilterItems, null, filters.map((filter, idx) => (react_1.default.createElement(index_1.Filter, { filter: filter, key: filter.property + '-' + idx })))),
+        react_1.default.createElement(exports.FilterItems, null, filters.map((filter, idx) => (react_1.default.createElement(index_1.Filter, { filter: filter, key: filter.property + '-' + idx, filterValuesCasing: filterValuesCasing })))),
         hasActiveFilters && (react_1.default.createElement(_theme_1.Button, { size: "small", onClick: handleClearAll }, translate(translationKeys.placeholder, 'Clear all filters')))));
 }
 exports.FilterContent = FilterContent;

package/lib/components/Select/Select.d.ts

@@ -15,9 +15,7 @@ export interface SelectProps {
 export declare const Select: ({ className, selected, options, dataAttributes, withArrow, triggerEvent, onChange, placement, alignment, icon, onlyIcon, }: SelectProps) => JSX.Element;
 export declare const SelectContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SelectInput: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SelectInputValue: import("styled-components").StyledComponent<"div", any, {
-    withIcon?: boolean | undefined;
-}, never>;
+export declare const SelectInputValue: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SelectList: import("styled-components").StyledComponent<"ul", any, {
     placement?: string | undefined;
     alignment?: string | undefined;

package/lib/components/Select/Select.js

@@ -56,7 +56,7 @@ const Select = ({ className, selected, options, dataAttributes, withArrow, trigg
     }, [selected]);
     return (react_1.default.createElement(exports.SelectContainer, Object.assign({}, dataAttributes, { "data-testid": "select", className: className, ref: selectRef, onPointerEnter: triggerEvent === 'hover' ? handleOpen : undefined, onPointerLeave: triggerEvent === 'hover' ? handleClose : undefined, onClick: triggerEvent === 'click' ? handleToggle : undefined }),
         react_1.default.createElement(exports.SelectInput, null,
-            !onlyIcon && (react_1.default.createElement(exports.SelectInputValue, { withIcon: withArrow || !!icon }, _selected)),
+            !onlyIcon && react_1.default.createElement(exports.SelectInputValue, null, _selected),
             icon,
             withArrow ? isOpen ? react_1.default.createElement(icons_1.ArrowIcon, { direction: "up" }) : react_1.default.createElement(icons_1.ArrowIcon, { direction: "down" }) : null),
         isOpen && (react_1.default.createElement(exports.SelectList, { placement: placement, alignment: alignment }, options.map((option, index) => (react_1.default.createElement(exports.SelectListItem, { key: index, onClick: () => handleSelect(option) }, option)))))));
@@ -83,10 +83,11 @@ exports.SelectInput = styled_components_1.default.div `
   border-radius: var(--select-input-border-radius);
   padding: var(--select-input-padding-vertical) var(--select-input-padding-horizontal);
   cursor: pointer;
+  gap: 8px;
 `;
 exports.SelectInputValue = styled_components_1.default.div `
   pointer-events: none;
-  ${({ withIcon }) => (withIcon ? 'margin-right: 8px;' : '')}
+  min-width: 0;
 `;
 exports.SelectList = styled_components_1.default.ul `
   position: absolute;
@@ -96,7 +97,9 @@ exports.SelectList = styled_components_1.default.ul `
   right: ${({ alignment }) => (alignment === 'end' ? '0' : 'auto')};
   margin: 0;
   min-width: var(--select-list-min-width);
+  width: 100%;
   max-width: var(--select-list-max-width);
+  ${({ placement }) => (!placement || placement === 'bottom' ? 'margin-top: 2px' : '')};
   padding: var(--select-list-padding);
   background-color: var(--select-list-background-color);
   border-radius: var(--select-list-border-radius);

package/lib/components/Tag/Tag.d.ts

@@ -10,8 +10,9 @@ interface TagProps {
     children?: React.ReactNode;
     closable?: boolean;
     color?: StatusColor | Color | string;
+    size?: string;
     icon?: React.ReactNode;
     onClick?: () => void;
 }
-export declare function Tag({ children, className, color, icon, onClick }: TagProps): JSX.Element;
+export declare function Tag({ children, className, color, icon, onClick, size }: TagProps): JSX.Element;
 export {};

package/lib/components/Tag/Tag.js

@@ -6,15 +6,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tag = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-function Tag({ children, className, color, icon, onClick }) {
-    return (react_1.default.createElement(TagContainer, { className: className, color: color, onClick: onClick },
+function Tag({ children, className, color, icon, onClick, size }) {
+    return (react_1.default.createElement(TagContainer, { className: className, color: color, size: size, onClick: onClick },
         icon ? icon : null,
         children));
 }
 exports.Tag = Tag;
-const TagContainer = styled_components_1.default.div.attrs(({ className, color }) => ({
+const TagContainer = styled_components_1.default.div.attrs(({ className, color, size }) => ({
     'data-component-name': 'Tag/Tag',
-    className: (className || '') + ` tag-default ${color ? `tag-${color}` : ''}`,
+    className: (className || '') +
+        ` tag-default ${color ? `tag-${color}` : ''} ${size ? `tag-size-${size}` : ''}`,
 })) `
   display: inline-flex;
   align-items: center;
@@ -23,6 +24,11 @@ const TagContainer = styled_components_1.default.div.attrs(({ className, color }
 
   padding: var(--tag-padding);
   margin: var(--tag-margin);
+
+  &:last-child {
+    margin-right: 0;
+  }
+
   gap: var(--tag-gap);
 
   font-size: var(--tag-font-size);

package/lib/components/Tag/styledVariables.js

@@ -40,6 +40,11 @@ exports.tag = (0, styled_components_1.css) `
     * @tokens Tag colors
     */
 
+  .tag-size-large {
+    --tag-padding: 4px 16px;
+    --tag-font-size: var(--font-size-regular);
+  }
+
   .tag-grey,
   .tag-draft,
   .tag-schema,

package/lib/config.d.ts

@@ -458,6 +458,10 @@ declare const catalogSchema: {
         readonly groupByFirstFilter: {
             readonly type: "boolean";
         };
+        readonly filterValuesCasing: {
+            readonly type: "string";
+            readonly enum: readonly ["sentence"];
+        };
         readonly items: {
             readonly type: "array";
             readonly items: {
@@ -1749,6 +1753,10 @@ export declare const themeConfigSchema: {
                         readonly groupByFirstFilter: {
                             readonly type: "boolean";
                         };
+                        readonly filterValuesCasing: {
+                            readonly type: "string";
+                            readonly enum: readonly ["sentence"];
+                        };
                         readonly items: {
                             readonly type: "array";
                             readonly items: {

package/lib/config.js

@@ -332,6 +332,7 @@ const catalogSchema = {
         slug: { type: 'string' },
         filters: { type: 'array', items: catalogFilterSchema },
         groupByFirstFilter: { type: 'boolean' },
+        filterValuesCasing: { type: 'string', enum: ['sentence'] },
         items: navItemsSchema,
         requiredPermission: { type: 'string' },
         separateVersions: { type: 'boolean' },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.18.3-patch.1",
+  "version": "0.18.3-patch.2",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",

package/src/components/Catalog/Catalog.tsx

@@ -51,6 +51,7 @@ export default function Catalog(props: {
           filters={filters}
           filterTerm={filterTerm}
           isMobile={false}
+          filterValuesCasing={catalogConfig.filterValuesCasing}
         />
         {isAddingFilter && (
           <FilterPopover setIsAddingFilter={setIsAddingFilter} filters={filters} />

package/src/components/Filter/Filter.tsx

@@ -9,7 +9,13 @@ import { useTranslate } from '@portal/hooks';
 import { CheckboxIcon } from '@theme/icons';
 import { Select } from '@theme/components/Select';
 
-export function Filter({ filter }: { filter: ResolvedFilter & { selectedOptions: any } }) {
+export function Filter({
+  filter,
+  filterValuesCasing,
+}: {
+  filter: ResolvedFilter & { selectedOptions: any };
+  filterValuesCasing?: 'sentence';
+}) {
   const { translate } = useTranslate();
   const translationKeys = {
     selectAll: 'theme.catalog.filters.select.all',
@@ -44,7 +50,9 @@ export function Filter({ filter }: { filter: ResolvedFilter & { selectedOptions:
             role="link"
             onClick={() => filter.selectOption(option.value)}
           >
-            <FilterOptionLabel>{translate(option.value)}</FilterOptionLabel>
+            <FilterOptionLabel>
+              {changeCasing(translate(option.value), filterValuesCasing)}
+            </FilterOptionLabel>
             <FilterOptionCount>{option.count}</FilterOptionCount>
           </FilterOption>
         ),
@@ -65,6 +73,7 @@ export function Filter({ filter }: { filter: ResolvedFilter & { selectedOptions:
       <FilterTitle>{translate(filter.titleTranslationKey, filter.title)} </FilterTitle>
       {filter.type === 'select' ? (
         <StyledSelect
+          withArrow={true}
           selected={selectedOptionComponent}
           options={selectOptions.map((option) => option.component)}
         />
@@ -119,7 +128,9 @@ export function Filter({ filter }: { filter: ResolvedFilter & { selectedOptions:
           return (
             <FilterOption key={id} role="link" onClick={() => filter.toggleOption(value.value)}>
               <CheckboxIcon checked={filter.selectedOptions.has(value.value)} />
-              <FilterOptionLabel>{translate(value.value)}</FilterOptionLabel>
+              <FilterOptionLabel>
+                {changeCasing(translate(value.value), filterValuesCasing)}
+              </FilterOptionLabel>
               <FilterOptionCount>{value.count}</FilterOptionCount>
             </FilterOption>
           );
@@ -129,6 +140,13 @@ export function Filter({ filter }: { filter: ResolvedFilter & { selectedOptions:
   );
 }
 
+function changeCasing(str: string, casing?: 'sentence') {
+  if (casing !== 'sentence') return str;
+
+  const words = str.split(/[\s-_]+/);
+  return words.map((word) => word[0].toUpperCase() + word.slice(1).toLowerCase()).join(' ');
+}
+
 const FilterGroup = styled.div`
   padding: var(--filter-group-padding);
 `;

package/src/components/Filter/FilterContent.tsx

@@ -13,6 +13,7 @@ interface FilterContentProps {
   filters: ResolvedFilter[];
   filterTerm: string;
   isMobile: boolean;
+  filterValuesCasing?: 'sentence';
 }
 
 export function FilterContent({
@@ -20,6 +21,7 @@ export function FilterContent({
   filters,
   filterTerm,
   isMobile,
+  filterValuesCasing,
 }: FilterContentProps) {
   const { translate } = useTranslate();
   const translationKeys = {
@@ -50,7 +52,11 @@ export function FilterContent({
       </FilterControls>
       <FilterItems>
         {filters.map((filter, idx) => (
-          <Filter filter={filter} key={filter.property + '-' + idx} />
+          <Filter
+            filter={filter}
+            key={filter.property + '-' + idx}
+            filterValuesCasing={filterValuesCasing}
+          />
         ))}
       </FilterItems>
       {hasActiveFilters && (

package/src/components/Select/Select.tsx

@@ -72,9 +72,7 @@ export const Select = ({
       onClick={triggerEvent === 'click' ? handleToggle : undefined}
     >
       <SelectInput>
-        {!onlyIcon && (
-          <SelectInputValue withIcon={withArrow || !!icon}>{_selected}</SelectInputValue>
-        )}
+        {!onlyIcon && <SelectInputValue>{_selected}</SelectInputValue>}
         {icon}
         {withArrow ? isOpen ? <ArrowIcon direction="up" /> : <ArrowIcon direction="down" /> : null}
       </SelectInput>
@@ -113,11 +111,12 @@ export const SelectInput = styled.div`
   border-radius: var(--select-input-border-radius);
   padding: var(--select-input-padding-vertical) var(--select-input-padding-horizontal);
   cursor: pointer;
+  gap: 8px;
 `;
 
-export const SelectInputValue = styled.div<{ withIcon?: boolean }>`
+export const SelectInputValue = styled.div`
   pointer-events: none;
-  ${({ withIcon }) => (withIcon ? 'margin-right: 8px;' : '')}
+  min-width: 0;
 `;
 
 export const SelectList = styled.ul<{ placement?: string; alignment?: string }>`
@@ -128,7 +127,9 @@ export const SelectList = styled.ul<{ placement?: string; alignment?: string }>`
   right: ${({ alignment }) => (alignment === 'end' ? '0' : 'auto')};
   margin: 0;
   min-width: var(--select-list-min-width);
+  width: 100%;
   max-width: var(--select-list-max-width);
+  ${({ placement }) => (!placement || placement === 'bottom' ? 'margin-top: 2px' : '')};
   padding: var(--select-list-padding);
   background-color: var(--select-list-background-color);
   border-radius: var(--select-list-border-radius);

package/src/components/Tag/Tag.tsx

@@ -24,22 +24,25 @@ interface TagProps {
   children?: React.ReactNode;
   closable?: boolean;
   color?: StatusColor | Color | string;
+  size?: string;
   icon?: React.ReactNode;
   onClick?: () => void;
 }
 
-export function Tag({ children, className, color, icon, onClick }: TagProps): JSX.Element {
+export function Tag({ children, className, color, icon, onClick, size }: TagProps): JSX.Element {
   return (
-    <TagContainer className={className} color={color} onClick={onClick}>
+    <TagContainer className={className} color={color} size={size} onClick={onClick}>
       {icon ? icon : null}
       {children}
     </TagContainer>
   );
 }
 
-const TagContainer = styled.div.attrs(({ className, color }: TagProps) => ({
+const TagContainer = styled.div.attrs(({ className, color, size }: TagProps) => ({
   'data-component-name': 'Tag/Tag',
-  className: (className || '') + ` tag-default ${color ? `tag-${color}` : ''}`,
+  className:
+    (className || '') +
+    ` tag-default ${color ? `tag-${color}` : ''} ${size ? `tag-size-${size}` : ''}`,
 }))<TagProps>`
   display: inline-flex;
   align-items: center;
@@ -48,6 +51,11 @@ const TagContainer = styled.div.attrs(({ className, color }: TagProps) => ({
 
   padding: var(--tag-padding);
   margin: var(--tag-margin);
+
+  &:last-child {
+    margin-right: 0;
+  }
+
   gap: var(--tag-gap);
 
   font-size: var(--tag-font-size);

package/src/components/Tag/styledVariables.ts

@@ -38,6 +38,11 @@ export const tag = css`
     * @tokens Tag colors
     */
 
+  .tag-size-large {
+    --tag-padding: 4px 16px;
+    --tag-font-size: var(--font-size-regular);
+  }
+
   .tag-grey,
   .tag-draft,
   .tag-schema,

package/src/config.ts

@@ -373,6 +373,7 @@ const catalogSchema = {
     slug: { type: 'string' },
     filters: { type: 'array', items: catalogFilterSchema },
     groupByFirstFilter: { type: 'boolean' },
+    filterValuesCasing: { type: 'string', enum: ['sentence'] },
     items: navItemsSchema,
     requiredPermission: { type: 'string' },
     separateVersions: { type: 'boolean' },