@redocly/theme 0.37.7 → 0.38.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/lib/components/Badge/Badge.js +1 -1
  2. package/lib/components/Search/SearchItem.js +4 -1
  3. package/lib/components/Select/Select.d.ts +3 -0
  4. package/lib/components/Select/Select.js +7 -5
  5. package/lib/core/types/search.d.ts +2 -1
  6. package/package.json +1 -1
  7. package/src/components/Badge/Badge.tsx +1 -1
  8. package/src/components/Search/SearchItem.tsx +7 -0
  9. package/src/components/Select/Select.tsx +22 -9
  10. package/src/core/types/search.ts +2 -1
package/lib/components/Badge/Badge.js CHANGED
@@ -39,7 +39,7 @@ const BadgeComponent = styled_components_1.default.span `
39
39
  vertical-align: middle;
40
40
  line-height: var(--line-height-base);
41
41
  color: var(--badge-text-color);
42
- background-color: var(--badge-bg-color);
42
+ background-color: ${({ color }) => color || 'var(--badge-bg-color)'};
43
43
  border-radius: var(--badge-border-radius);
44
44
  margin: 0 0 0 0.5em;
45
45
  font-size: var(--font-size-base);
package/lib/components/Search/SearchItem.js CHANGED
@@ -54,7 +54,10 @@ function SearchItem({ item, className, product }) {
54
54
  item.pathName ? (0, SearchHighlight_1.highlight)(item.pathName) : null)) : null,
55
55
  react_1.default.createElement(SearchItemTitleWrapper, null,
56
56
  react_1.default.createElement(SearchItemTitle, null, (0, SearchHighlight_1.highlight)(item.title)),
57
- item.deprecated ? react_1.default.createElement(SearchItemBadge, { deprecated: true }, "Deprecated") : null),
57
+ item.deprecated ? react_1.default.createElement(SearchItemBadge, { deprecated: true }, "Deprecated") : null,
58
+ item.badges
59
+ ? item.badges.map(({ name, color }) => (react_1.default.createElement(SearchItemBadge, { color: color || 'var(--color-info-base)', key: name }, name)))
60
+ : null),
58
61
  Array.isArray(item.text) ? (react_1.default.createElement(SearchItemDescription, null, (0, SearchHighlight_1.highlight)(item.text))) : null),
59
62
  itemParam ? (react_1.default.createElement(SearchItemPlace, null,
60
63
  react_1.default.createElement("div", null,
package/lib/components/Select/Select.d.ts CHANGED
@@ -17,9 +17,12 @@ export type SelectProps<T = any> = {
17
17
  onlyIcon?: boolean;
18
18
  placeholder?: string;
19
19
  disabled?: boolean;
20
+ hideCheckmarkIcon?: boolean;
21
+ dataTestId?: string;
20
22
  renderInput?: (props: {
21
23
  isOpen: boolean;
22
24
  }) => React.ReactElement;
25
+ renderDivider?: () => React.ReactElement;
23
26
  };
24
27
  export declare function Select<T>(props: SelectProps<T>): JSX.Element;
25
28
  export declare const SelectContainer: import("styled-components").StyledComponent<"div", any, {
package/lib/components/Select/Select.js CHANGED
@@ -34,7 +34,7 @@ const ChevronDownIcon_1 = require("../../icons/ChevronDownIcon/ChevronDownIcon")
34
34
  const ChevronUpIcon_1 = require("../../icons/ChevronUpIcon/ChevronUpIcon");
35
35
  const CheckmarkIcon_1 = require("../../icons/CheckmarkIcon/CheckmarkIcon");
36
36
  function Select(props) {
37
- const { className, value, options, dataAttributes, withArrow = true, triggerEvent = 'click', onChange, placement, alignment, icon, onlyIcon, disabled, placeholder, renderInput, } = props;
37
+ const { className, value, options, dataAttributes, withArrow = true, triggerEvent = 'click', onChange, placement, alignment, icon, onlyIcon, disabled, placeholder, hideCheckmarkIcon, renderInput, renderDivider, dataTestId = 'select', } = props;
38
38
  const containerRef = (0, react_1.useRef)(null);
39
39
  const [isOpen, setIsOpen] = (0, react_1.useState)(false);
40
40
  // const [selectedIdx, setSelectedIdx] = useState<React.ReactNode | string>(selected);
@@ -62,13 +62,15 @@ function Select(props) {
62
62
  !onlyIcon && (react_1.default.createElement(exports.SelectInputValue, null, (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) || (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.element) || placeholder)),
63
63
  icon,
64
64
  withArrow ? isOpen ? react_1.default.createElement(ChevronUpIcon_1.ChevronUpIcon, { size: "14px" }) : react_1.default.createElement(ChevronDownIcon_1.ChevronDownIcon, { size: "14px" }) : null));
65
- return (react_1.default.createElement(exports.SelectContainer, Object.assign({ "data-component-name": "Select/Select" }, dataAttributes, { disabled: disabled, "data-testid": "select", className: className, ref: containerRef, onPointerEnter: triggerEvent === 'hover' ? handleOpen : undefined, onPointerLeave: triggerEvent === 'hover' ? handleClose : undefined, onClick: triggerEvent === 'click' ? handleToggle : undefined }),
65
+ return (react_1.default.createElement(exports.SelectContainer, Object.assign({ "data-component-name": "Select/Select" }, dataAttributes, { disabled: disabled, "data-testid": dataTestId, className: className, ref: containerRef, onPointerEnter: triggerEvent === 'hover' ? handleOpen : undefined, onPointerLeave: triggerEvent === 'hover' ? handleClose : undefined, onClick: triggerEvent === 'click' ? handleToggle : undefined }),
66
66
  renderInput ? renderInput({ isOpen }) : renderDefaultInput(),
67
67
  isOpen && (react_1.default.createElement(exports.SelectList, { placement: placement, alignment: alignment }, options.map((option, index) => {
68
68
  const selected = option.value === value;
69
- return (react_1.default.createElement(exports.SelectListItem, { key: index, onClick: () => handleSelect(option.value), selected: selected },
70
- typeof option.element === 'string' ? react_1.default.createElement("div", null, option.element) : option.element,
71
- selected && react_1.default.createElement(CheckmarkIcon_1.CheckmarkIcon, null)));
69
+ return (react_1.default.createElement(react_1.default.Fragment, null,
70
+ react_1.default.createElement(exports.SelectListItem, { key: index, onClick: () => handleSelect(option.value), selected: selected },
71
+ typeof option.element === 'string' ? (react_1.default.createElement("div", null, option.element)) : (option.element),
72
+ !hideCheckmarkIcon && selected && react_1.default.createElement(CheckmarkIcon_1.CheckmarkIcon, null)),
73
+ renderDivider && index !== options.length - 1 ? renderDivider() : null));
72
74
  })))));
73
75
  }
74
76
  exports.Select = Select;
package/lib/core/types/search.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import type { REDOCLY_ROUTE_RBAC } from '@redocly/config';
1
+ import type { ItemBadge, REDOCLY_ROUTE_RBAC } from '@redocly/config';
2
2
  import type { ProductConfig } from '../../config';
3
3
  export type OperationParameter = {
4
4
  name: string | string[];
@@ -28,4 +28,5 @@ export type SearchDocument = {
28
28
  slug?: string;
29
29
  fsPath?: string;
30
30
  };
31
+ badges?: ItemBadge[];
31
32
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@redocly/theme",
3
- "version": "0.37.7",
3
+ "version": "0.38.1",
4
4
  "description": "Shared UI components lib",
5
5
  "keywords": [
6
6
  "theme",
package/src/components/Badge/Badge.tsx CHANGED
@@ -18,7 +18,7 @@ const BadgeComponent = styled.span<BadgeProps>`
18
18
  vertical-align: middle;
19
19
  line-height: var(--line-height-base);
20
20
  color: var(--badge-text-color);
21
- background-color: var(--badge-bg-color);
21
+ background-color: ${({ color }) => color || 'var(--badge-bg-color)'};
22
22
  border-radius: var(--badge-border-radius);
23
23
  margin: 0 0 0 0.5em;
24
24
  font-size: var(--font-size-base);
package/src/components/Search/SearchItem.tsx CHANGED
@@ -56,6 +56,13 @@ export function SearchItem({ item, className, product }: SearchItemProps): JSX.E
56
56
  <SearchItemTitleWrapper>
57
57
  <SearchItemTitle>{highlight(item.title)}</SearchItemTitle>
58
58
  {item.deprecated ? <SearchItemBadge deprecated>Deprecated</SearchItemBadge> : null}
59
+ {item.badges
60
+ ? item.badges.map(({ name, color }) => (
61
+ <SearchItemBadge color={color || 'var(--color-info-base)'} key={name}>
62
+ {name}
63
+ </SearchItemBadge>
64
+ ))
65
+ : null}
59
66
  </SearchItemTitleWrapper>
60
67
  {Array.isArray(item.text) ? (
61
68
  <SearchItemDescription>{highlight(item.text)}</SearchItemDescription>
package/src/components/Select/Select.tsx CHANGED
@@ -24,7 +24,10 @@ export type SelectProps<T = any> = {
24
24
  onlyIcon?: boolean;
25
25
  placeholder?: string;
26
26
  disabled?: boolean;
27
+ hideCheckmarkIcon?: boolean;
28
+ dataTestId?: string;
27
29
  renderInput?: (props: { isOpen: boolean }) => React.ReactElement;
30
+ renderDivider?: () => React.ReactElement;
28
31
  };
29
32
 
30
33
  export function Select<T>(props: SelectProps<T>): JSX.Element {
@@ -42,7 +45,10 @@ export function Select<T>(props: SelectProps<T>): JSX.Element {
42
45
  onlyIcon,
43
46
  disabled,
44
47
  placeholder,
48
+ hideCheckmarkIcon,
45
49
  renderInput,
50
+ renderDivider,
51
+ dataTestId = 'select',
46
52
  } = props;
47
53
 
48
54
  const containerRef = useRef<HTMLDivElement | null>(null);
@@ -94,7 +100,7 @@ export function Select<T>(props: SelectProps<T>): JSX.Element {
94
100
  data-component-name="Select/Select"
95
101
  {...dataAttributes}
96
102
  disabled={disabled}
97
- data-testid="select"
103
+ data-testid={dataTestId}
98
104
  className={className}
99
105
  ref={containerRef}
100
106
  onPointerEnter={triggerEvent === 'hover' ? handleOpen : undefined}
@@ -107,14 +113,21 @@ export function Select<T>(props: SelectProps<T>): JSX.Element {
107
113
  {options.map((option, index) => {
108
114
  const selected = option.value === value;
109
115
  return (
110
- <SelectListItem
111
- key={index}
112
- onClick={() => handleSelect(option.value)}
113
- selected={selected}
114
- >
115
- {typeof option.element === 'string' ? <div>{option.element}</div> : option.element}
116
- {selected && <CheckmarkIcon />}
117
- </SelectListItem>
116
+ <>
117
+ <SelectListItem
118
+ key={index}
119
+ onClick={() => handleSelect(option.value)}
120
+ selected={selected}
121
+ >
122
+ {typeof option.element === 'string' ? (
123
+ <div>{option.element}</div>
124
+ ) : (
125
+ option.element
126
+ )}
127
+ {!hideCheckmarkIcon && selected && <CheckmarkIcon />}
128
+ </SelectListItem>
129
+ {renderDivider && index !== options.length - 1 ? renderDivider() : null}
130
+ </>
118
131
  );
119
132
  })}
120
133
  </SelectList>
package/src/core/types/search.ts CHANGED
@@ -1,4 +1,4 @@
1
- import type { REDOCLY_ROUTE_RBAC } from '@redocly/config';
1
+ import type { ItemBadge, REDOCLY_ROUTE_RBAC } from '@redocly/config';
2
2
  import type { ProductConfig } from '@redocly/theme/config';
3
3
 
4
4
  export type OperationParameter = {
@@ -25,4 +25,5 @@ export type SearchDocument = {
25
25
  product?: ProductConfig;
26
26
  'redocly::teams-rbac'?: { [x: string]: string };
27
27
  [REDOCLY_ROUTE_RBAC]?: { slug?: string; fsPath?: string };
28
+ badges?: ItemBadge[];
28
29
  };