@redocly/theme 0.30.5 → 0.30.6

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.
@@ -14,22 +14,22 @@ const telemetry_1 = require("../../mocks/telemetry");
14
14
  function CodeBlockControls({ children, className, title, controls, }) {
15
15
  var _a, _b, _c, _d, _e, _f;
16
16
  const { codeSnippet } = (0, hooks_1.useThemeConfig)();
17
- const controlsType = (codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.controlsStyle) || 'icon';
17
+ const controlsType = (codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.elementFormat) || 'icon';
18
18
  const { copy, expand, collapse, select, deselect, report } = controls
19
19
  ? controls
20
20
  : { copy: null, expand: null, collapse: null, select: null, deselect: null, report: null };
21
21
  const defaultControls = controls ? (react_1.default.createElement(react_1.default.Fragment, null,
22
22
  react_1.default.createElement(Title, null, title),
23
23
  react_1.default.createElement(ControlsWrapper, null,
24
- copy && !((_a = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.copy) === null || _a === void 0 ? void 0 : _a.hide) ? (react_1.default.createElement(CopyButton_1.CopyButton, { data: copy.data, "data-source": copy.dataSource, "data-hash": copy.dataHash, type: controlsType, toasterPlacement: copy.toasterPlacement, toasterDuration: copy.toasterDuration, buttonText: copy.label, tooltipText: copy.tooltipText, onCopyClick: () => {
25
- copy === null || copy === void 0 ? void 0 : copy.onClick;
26
- telemetry_1.telemetry.send('code_snippet_copied', {});
27
- } })) : null,
28
- expand && !((_b = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.expand) === null || _b === void 0 ? void 0 : _b.hide) ? (react_1.default.createElement(CodeBlock_1.CodeBlockControlButton, { "data-cy": "expand-all", "data-testid": "expand-all", asIcon: controlsType === 'icon', onClick: expand === null || expand === void 0 ? void 0 : expand.onClick, title: (expand === null || expand === void 0 ? void 0 : expand.tooltipText) || 'Expand all' }, controlsType === 'icon' ? react_1.default.createElement(icons_1.ExpandIcon, null) : (expand === null || expand === void 0 ? void 0 : expand.label) ? expand.label : 'Expand all')) : null,
29
- collapse && !((_c = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.collapse) === null || _c === void 0 ? void 0 : _c.hide) ? (react_1.default.createElement(CodeBlock_1.CodeBlockControlButton, { "data-cy": "collapse-all", "data-testid": "collapse-all", asIcon: controlsType === 'icon', onClick: collapse === null || collapse === void 0 ? void 0 : collapse.onClick, title: (collapse === null || collapse === void 0 ? void 0 : collapse.tooltipText) || 'Collapse all' }, controlsType === 'icon' ? (react_1.default.createElement(icons_1.CollapseIcon, null)) : (collapse === null || collapse === void 0 ? void 0 : collapse.label) ? (collapse.label) : ('Collapse all'))) : null,
24
+ report && ((_a = report === null || report === void 0 ? void 0 : report.props) === null || _a === void 0 ? void 0 : _a.visible) ? (react_1.default.createElement(CodeBlock_1.CodeBlockControlButton, Object.assign({ "data-cy": "report-button", "data-testid": "report-button", asIcon: controlsType === 'icon', title: (_b = report.props) === null || _b === void 0 ? void 0 : _b.tooltip }, report.props), controlsType === 'icon' ? react_1.default.createElement(icons_1.ReportIcon, null) : ((_c = report.props) === null || _c === void 0 ? void 0 : _c.buttonText) || 'Report')) : null,
25
+ expand && !((_d = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.expand) === null || _d === void 0 ? void 0 : _d.hide) ? (react_1.default.createElement(CodeBlock_1.CodeBlockControlButton, { "data-cy": "expand-all", "data-testid": "expand-all", asIcon: controlsType === 'icon', onClick: expand === null || expand === void 0 ? void 0 : expand.onClick, title: (expand === null || expand === void 0 ? void 0 : expand.tooltipText) || 'Expand all' }, controlsType === 'icon' ? react_1.default.createElement(icons_1.ExpandIcon, null) : (expand === null || expand === void 0 ? void 0 : expand.label) ? expand.label : 'Expand all')) : null,
26
+ collapse && !((_e = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.collapse) === null || _e === void 0 ? void 0 : _e.hide) ? (react_1.default.createElement(CodeBlock_1.CodeBlockControlButton, { "data-cy": "collapse-all", "data-testid": "collapse-all", asIcon: controlsType === 'icon', onClick: collapse === null || collapse === void 0 ? void 0 : collapse.onClick, title: (collapse === null || collapse === void 0 ? void 0 : collapse.tooltipText) || 'Collapse all' }, controlsType === 'icon' ? (react_1.default.createElement(icons_1.CollapseIcon, null)) : (collapse === null || collapse === void 0 ? void 0 : collapse.label) ? (collapse.label) : ('Collapse all'))) : null,
30
27
  select ? (react_1.default.createElement(CodeBlock_1.CodeBlockControlButton, { "data-cy": "select-all", "data-testid": "select-all", asIcon: controlsType === 'icon', onClick: select === null || select === void 0 ? void 0 : select.onClick, title: select === null || select === void 0 ? void 0 : select.tooltipText }, controlsType === 'icon' ? react_1.default.createElement(icons_1.SelectIcon, null) : (select === null || select === void 0 ? void 0 : select.label) ? select.label : 'Select all')) : null,
31
28
  deselect ? (react_1.default.createElement(CodeBlock_1.CodeBlockControlButton, { "data-cy": "clear-all", "data-testid": "clear-all", asIcon: controlsType === 'icon', onClick: deselect === null || deselect === void 0 ? void 0 : deselect.onClick, title: deselect === null || deselect === void 0 ? void 0 : deselect.tooltipText }, controlsType === 'icon' ? (react_1.default.createElement(icons_1.DeselectIcon, null)) : (deselect === null || deselect === void 0 ? void 0 : deselect.label) ? (deselect.label) : ('Clear all'))) : null,
32
- report && ((_d = report === null || report === void 0 ? void 0 : report.props) === null || _d === void 0 ? void 0 : _d.visible) ? (react_1.default.createElement(CodeBlock_1.CodeBlockControlButton, Object.assign({ "data-cy": "report-button", "data-testid": "report-button", asIcon: controlsType === 'icon', title: (_e = report.props) === null || _e === void 0 ? void 0 : _e.tooltip }, report.props), controlsType === 'icon' ? react_1.default.createElement(icons_1.ReportIcon, null) : ((_f = report.props) === null || _f === void 0 ? void 0 : _f.buttonText) || 'Report')) : null))) : null;
29
+ copy && !((_f = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.copy) === null || _f === void 0 ? void 0 : _f.hide) ? (react_1.default.createElement(CopyButton_1.CopyButton, { data: copy.data, "data-source": copy.dataSource, "data-hash": copy.dataHash, type: controlsType, toasterPlacement: copy.toasterPlacement, toasterDuration: copy.toasterDuration, buttonText: copy.label, tooltipText: copy.tooltipText, onCopyClick: () => {
30
+ copy === null || copy === void 0 ? void 0 : copy.onClick;
31
+ telemetry_1.telemetry.send('code_snippet_copied', {});
32
+ } })) : null))) : null;
33
33
  return children || controls ? (react_1.default.createElement(ContainerWraper, { "data-component-name": "CodeBlock/CodeBlockControls", className: className }, children ? children : defaultControls)) : null;
34
34
  }
35
35
  exports.CodeBlockControls = CodeBlockControls;
package/lib/config.d.ts CHANGED
@@ -1218,7 +1218,7 @@ export declare const themeConfigSchema: {
1218
1218
  readonly codeSnippet: {
1219
1219
  readonly type: "object";
1220
1220
  readonly properties: {
1221
- readonly controlsStyle: {
1221
+ readonly elementFormat: {
1222
1222
  readonly type: "string";
1223
1223
  readonly default: "icon";
1224
1224
  };
@@ -2261,7 +2261,7 @@ export declare const productThemeOverrideSchema: {
2261
2261
  readonly codeSnippet: {
2262
2262
  readonly type: "object";
2263
2263
  readonly properties: {
2264
- readonly controlsStyle: {
2264
+ readonly elementFormat: {
2265
2265
  readonly type: "string";
2266
2266
  readonly default: "icon";
2267
2267
  };
package/lib/config.js CHANGED
@@ -490,7 +490,7 @@ exports.themeConfigSchema = {
490
490
  codeSnippet: {
491
491
  type: 'object',
492
492
  properties: {
493
- controlsStyle: { type: 'string', default: 'icon' },
493
+ elementFormat: { type: 'string', default: 'icon' },
494
494
  copy: {
495
495
  type: 'object',
496
496
  properties: Object.assign({}, hideConfigSchema.properties),
@@ -6,12 +6,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
6
6
  exports.CopyIcon = void 0;
7
7
  const react_1 = __importDefault(require("react"));
8
8
  const styled_components_1 = __importDefault(require("styled-components"));
9
- const Icon = ({ className }) => (react_1.default.createElement("span", { "data-component-name": "icons/CopyIcon", className: className },
10
- react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" },
11
- react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M5.16667 2.66667C5.16667 2.57462 5.24129 2.5 5.33333 2.5H12C12.092 2.5 12.1667 2.57462 12.1667 2.66667V10.6667C12.1667 10.7587 12.092 10.8333 12 10.8333H10H5.33333C5.24129 10.8333 5.16667 10.7587 5.16667 10.6667V4.66667V2.66667ZM4.16667 4.16667V2.66667C4.16667 2.02233 4.689 1.5 5.33333 1.5H12C12.6443 1.5 13.1667 2.02233 13.1667 2.66667V10.6667C13.1667 11.311 12.6443 11.8333 12 11.8333H10.5V13.3333C10.5 13.6428 10.3771 13.9395 10.1583 14.1583C9.9395 14.3771 9.64275 14.5 9.33333 14.5H2.66667C2.35725 14.5 2.0605 14.3771 1.84171 14.1583C1.62292 13.9395 1.5 13.6428 1.5 13.3333V5.33333C1.5 5.02391 1.62292 4.72717 1.84171 4.50838C2.0605 4.28958 2.35725 4.16667 2.66667 4.16667H4.16667ZM9.5 11.8333V13.3333C9.5 13.3775 9.48244 13.4199 9.45118 13.4512C9.41993 13.4824 9.37754 13.5 9.33333 13.5H2.66667C2.62246 13.5 2.58007 13.4824 2.54882 13.4512C2.51756 13.4199 2.5 13.3775 2.5 13.3333V5.33333C2.5 5.28913 2.51756 5.24674 2.54882 5.21548C2.58007 5.18423 2.62246 5.16667 2.66667 5.16667H4.16667V10.6667C4.16667 11.311 4.689 11.8333 5.33333 11.8333H9.5Z", fill: "currentColor", fillOpacity: "1" }))));
9
+ const Icon = ({ className }) => (react_1.default.createElement("svg", { "data-component-name": "icons/CopyIcon", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", className: className },
10
+ react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M5.16667 2.66667C5.16667 2.57462 5.24129 2.5 5.33333 2.5H12C12.092 2.5 12.1667 2.57462 12.1667 2.66667V10.6667C12.1667 10.7587 12.092 10.8333 12 10.8333H10H5.33333C5.24129 10.8333 5.16667 10.7587 5.16667 10.6667V4.66667V2.66667ZM4.16667 4.16667V2.66667C4.16667 2.02233 4.689 1.5 5.33333 1.5H12C12.6443 1.5 13.1667 2.02233 13.1667 2.66667V10.6667C13.1667 11.311 12.6443 11.8333 12 11.8333H10.5V13.3333C10.5 13.6428 10.3771 13.9395 10.1583 14.1583C9.9395 14.3771 9.64275 14.5 9.33333 14.5H2.66667C2.35725 14.5 2.0605 14.3771 1.84171 14.1583C1.62292 13.9395 1.5 13.6428 1.5 13.3333V5.33333C1.5 5.02391 1.62292 4.72717 1.84171 4.50838C2.0605 4.28958 2.35725 4.16667 2.66667 4.16667H4.16667ZM9.5 11.8333V13.3333C9.5 13.3775 9.48244 13.4199 9.45118 13.4512C9.41993 13.4824 9.37754 13.5 9.33333 13.5H2.66667C2.62246 13.5 2.58007 13.4824 2.54882 13.4512C2.51756 13.4199 2.5 13.3775 2.5 13.3333V5.33333C2.5 5.28913 2.51756 5.24674 2.54882 5.21548C2.58007 5.18423 2.62246 5.16667 2.66667 5.16667H4.16667V10.6667C4.16667 11.311 4.689 11.8333 5.33333 11.8333H9.5Z", fill: "currentColor", fillOpacity: "1" })));
12
11
  exports.CopyIcon = (0, styled_components_1.default)(Icon) `
13
- width: 1em;
14
- height: 1em;
12
+ width: 1.1em;
13
+ height: 1.1em;
15
14
  vertical-align: middle;
16
15
  `;
17
16
  //# sourceMappingURL=CopyIcon.js.map
@@ -12,8 +12,8 @@ const Icon = ({ className }) => (react_1.default.createElement("svg", { xmlns: "
12
12
  react_1.default.createElement("path", { d: "M8.5 4.5H7.5V9H8.5V4.5Z", fill: "currentColor", fillOpacity: "1" }),
13
13
  react_1.default.createElement("path", { d: "M13 14H3C2.73488 13.9997 2.4807 13.8942 2.29323 13.7068C2.10576 13.5193 2.0003 13.2651 2 13V3C2.0003 2.73488 2.10576 2.4807 2.29323 2.29323C2.4807 2.10576 2.73488 2.0003 3 2H13C13.2651 2.0003 13.5193 2.10576 13.7068 2.29323C13.8942 2.4807 13.9997 2.73488 14 3V13C13.9997 13.2651 13.8942 13.5193 13.7068 13.7068C13.5193 13.8942 13.2651 13.9997 13 14ZM3 3V13H13.0006L13 3H3Z", fill: "currentColor", fillOpacity: "1" })));
14
14
  exports.ReportIcon = (0, styled_components_1.default)(Icon) `
15
- width: 1.3em;
16
- height: 1.3em;
15
+ width: 1.2em;
16
+ height: 1.2em;
17
17
  vertical-align: middle;
18
18
  `;
19
19
  //# sourceMappingURL=ReportIcon.js.map
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@redocly/theme",
3
- "version": "0.30.5",
3
+ "version": "0.30.6",
4
4
  "description": "Shared UI components lib",
5
5
  "keywords": [
6
6
  "theme",
@@ -49,7 +49,7 @@ export function CodeBlockControls({
49
49
  controls,
50
50
  }: CodeBlockControlsProps): JSX.Element | null {
51
51
  const { codeSnippet } = useThemeConfig();
52
- const controlsType = (codeSnippet?.controlsStyle as ControlItemType) || 'icon';
52
+ const controlsType = (codeSnippet?.elementFormat as ControlItemType) || 'icon';
53
53
  const { copy, expand, collapse, select, deselect, report } = controls
54
54
  ? controls
55
55
  : { copy: null, expand: null, collapse: null, select: null, deselect: null, report: null };
@@ -58,21 +58,16 @@ export function CodeBlockControls({
58
58
  <>
59
59
  <Title>{title}</Title>
60
60
  <ControlsWrapper>
61
- {copy && !codeSnippet?.copy?.hide ? (
62
- <CopyButton
63
- data={copy.data}
64
- data-source={copy.dataSource}
65
- data-hash={copy.dataHash}
66
- type={controlsType}
67
- toasterPlacement={copy.toasterPlacement}
68
- toasterDuration={copy.toasterDuration}
69
- buttonText={copy.label}
70
- tooltipText={copy.tooltipText}
71
- onCopyClick={() => {
72
- copy?.onClick;
73
- telemetry.send('code_snippet_copied', {});
74
- }}
75
- />
61
+ {report && report?.props?.visible ? (
62
+ <CodeBlockControlButton
63
+ data-cy="report-button"
64
+ data-testid="report-button"
65
+ asIcon={controlsType === 'icon'}
66
+ title={report.props?.tooltip}
67
+ {...report.props}
68
+ >
69
+ {controlsType === 'icon' ? <ReportIcon /> : report.props?.buttonText || 'Report'}
70
+ </CodeBlockControlButton>
76
71
  ) : null}
77
72
 
78
73
  {expand && !codeSnippet?.expand?.hide ? (
@@ -135,16 +130,21 @@ export function CodeBlockControls({
135
130
  </CodeBlockControlButton>
136
131
  ) : null}
137
132
 
138
- {report && report?.props?.visible ? (
139
- <CodeBlockControlButton
140
- data-cy="report-button"
141
- data-testid="report-button"
142
- asIcon={controlsType === 'icon'}
143
- title={report.props?.tooltip}
144
- {...report.props}
145
- >
146
- {controlsType === 'icon' ? <ReportIcon /> : report.props?.buttonText || 'Report'}
147
- </CodeBlockControlButton>
133
+ {copy && !codeSnippet?.copy?.hide ? (
134
+ <CopyButton
135
+ data={copy.data}
136
+ data-source={copy.dataSource}
137
+ data-hash={copy.dataHash}
138
+ type={controlsType}
139
+ toasterPlacement={copy.toasterPlacement}
140
+ toasterDuration={copy.toasterDuration}
141
+ buttonText={copy.label}
142
+ tooltipText={copy.tooltipText}
143
+ onCopyClick={() => {
144
+ copy?.onClick;
145
+ telemetry.send('code_snippet_copied', {});
146
+ }}
147
+ />
148
148
  ) : null}
149
149
  </ControlsWrapper>
150
150
  </>
package/src/config.ts CHANGED
@@ -564,7 +564,7 @@ export const themeConfigSchema = {
564
564
  codeSnippet: {
565
565
  type: 'object',
566
566
  properties: {
567
- controlsStyle: { type: 'string', default: 'icon' },
567
+ elementFormat: { type: 'string', default: 'icon' },
568
568
  copy: {
569
569
  type: 'object',
570
570
  properties: {
@@ -6,21 +6,27 @@ interface IconProps {
6
6
  }
7
7
 
8
8
  const Icon = ({ className }: IconProps) => (
9
- <span data-component-name="icons/CopyIcon" className={className}>
10
- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
11
- <path
12
- fillRule="evenodd"
13
- clipRule="evenodd"
14
- d="M5.16667 2.66667C5.16667 2.57462 5.24129 2.5 5.33333 2.5H12C12.092 2.5 12.1667 2.57462 12.1667 2.66667V10.6667C12.1667 10.7587 12.092 10.8333 12 10.8333H10H5.33333C5.24129 10.8333 5.16667 10.7587 5.16667 10.6667V4.66667V2.66667ZM4.16667 4.16667V2.66667C4.16667 2.02233 4.689 1.5 5.33333 1.5H12C12.6443 1.5 13.1667 2.02233 13.1667 2.66667V10.6667C13.1667 11.311 12.6443 11.8333 12 11.8333H10.5V13.3333C10.5 13.6428 10.3771 13.9395 10.1583 14.1583C9.9395 14.3771 9.64275 14.5 9.33333 14.5H2.66667C2.35725 14.5 2.0605 14.3771 1.84171 14.1583C1.62292 13.9395 1.5 13.6428 1.5 13.3333V5.33333C1.5 5.02391 1.62292 4.72717 1.84171 4.50838C2.0605 4.28958 2.35725 4.16667 2.66667 4.16667H4.16667ZM9.5 11.8333V13.3333C9.5 13.3775 9.48244 13.4199 9.45118 13.4512C9.41993 13.4824 9.37754 13.5 9.33333 13.5H2.66667C2.62246 13.5 2.58007 13.4824 2.54882 13.4512C2.51756 13.4199 2.5 13.3775 2.5 13.3333V5.33333C2.5 5.28913 2.51756 5.24674 2.54882 5.21548C2.58007 5.18423 2.62246 5.16667 2.66667 5.16667H4.16667V10.6667C4.16667 11.311 4.689 11.8333 5.33333 11.8333H9.5Z"
15
- fill="currentColor"
16
- fillOpacity="1"
17
- />
18
- </svg>
19
- </span>
9
+ <svg
10
+ data-component-name="icons/CopyIcon"
11
+ xmlns="http://www.w3.org/2000/svg"
12
+ width="16"
13
+ height="16"
14
+ viewBox="0 0 16 16"
15
+ fill="none"
16
+ className={className}
17
+ >
18
+ <path
19
+ fillRule="evenodd"
20
+ clipRule="evenodd"
21
+ d="M5.16667 2.66667C5.16667 2.57462 5.24129 2.5 5.33333 2.5H12C12.092 2.5 12.1667 2.57462 12.1667 2.66667V10.6667C12.1667 10.7587 12.092 10.8333 12 10.8333H10H5.33333C5.24129 10.8333 5.16667 10.7587 5.16667 10.6667V4.66667V2.66667ZM4.16667 4.16667V2.66667C4.16667 2.02233 4.689 1.5 5.33333 1.5H12C12.6443 1.5 13.1667 2.02233 13.1667 2.66667V10.6667C13.1667 11.311 12.6443 11.8333 12 11.8333H10.5V13.3333C10.5 13.6428 10.3771 13.9395 10.1583 14.1583C9.9395 14.3771 9.64275 14.5 9.33333 14.5H2.66667C2.35725 14.5 2.0605 14.3771 1.84171 14.1583C1.62292 13.9395 1.5 13.6428 1.5 13.3333V5.33333C1.5 5.02391 1.62292 4.72717 1.84171 4.50838C2.0605 4.28958 2.35725 4.16667 2.66667 4.16667H4.16667ZM9.5 11.8333V13.3333C9.5 13.3775 9.48244 13.4199 9.45118 13.4512C9.41993 13.4824 9.37754 13.5 9.33333 13.5H2.66667C2.62246 13.5 2.58007 13.4824 2.54882 13.4512C2.51756 13.4199 2.5 13.3775 2.5 13.3333V5.33333C2.5 5.28913 2.51756 5.24674 2.54882 5.21548C2.58007 5.18423 2.62246 5.16667 2.66667 5.16667H4.16667V10.6667C4.16667 11.311 4.689 11.8333 5.33333 11.8333H9.5Z"
22
+ fill="currentColor"
23
+ fillOpacity="1"
24
+ />
25
+ </svg>
20
26
  );
21
27
 
22
28
  export const CopyIcon = styled(Icon)`
23
- width: 1em;
24
- height: 1em;
29
+ width: 1.1em;
30
+ height: 1.1em;
25
31
  vertical-align: middle;
26
32
  `;
@@ -30,7 +30,7 @@ const Icon = ({ className }: IconProps) => (
30
30
  );
31
31
 
32
32
  export const ReportIcon = styled(Icon)`
33
- width: 1.3em;
34
- height: 1.3em;
33
+ width: 1.2em;
34
+ height: 1.2em;
35
35
  vertical-align: middle;
36
36
  `;