@redocly/theme 0.30.2 → 0.30.3-beta.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.
@@ -256,9 +256,10 @@ function collectFilterOptions(items, filters) {
256
256
  }
257
257
  }
258
258
  }
259
- const options = Object.entries(usedOptions)
260
- .map(([value, count]) => ({ value, count }))
261
- .sort((a, b) => b.value.localeCompare(a.value));
259
+ const options = Object.entries(usedOptions).map(([value, count]) => ({ value, count }));
260
+ if (!staticOptions) {
261
+ options.sort((a, b) => b.value.localeCompare(a.value));
262
+ }
262
263
  if (othersCount) {
263
264
  options.push({
264
265
  value: filter.missingCategoryNameTranslationKey || filter.missingCategoryName || 'Others',
@@ -52,7 +52,7 @@ function Filter({ filter, filterValuesCasing, }) {
52
52
  return;
53
53
  filter.selectOption(Object.assign(Object.assign({}, filter.selectedOptions), { to: formatDateWithNoTimeZone(to) }));
54
54
  } })))) : (filter.filteredOptions.map((value) => {
55
- const id = 'filter--' + filter.property + '--' + slug(value.value);
55
+ const id = 'filter--' + filter.property + '--' + value.value;
56
56
  return (react_1.default.createElement(FilterOption, { key: id, role: "link", onClick: () => filter.toggleOption(value.value) },
57
57
  react_1.default.createElement(icons_1.CheckboxIcon, { checked: filter.selectedOptions.has(value.value) }),
58
58
  react_1.default.createElement(FilterOptionLabel, null, changeCasing(translate(value.value), filterValuesCasing)),
@@ -133,10 +133,6 @@ const StyledSelect = (0, styled_components_1.default)(Select_1.Select) `
133
133
  margin: var(--filter-select-option-margin);
134
134
  }
135
135
  `;
136
- // TODO: import from portal
137
- function slug(str) {
138
- return str.replace(/\s/g, '-').toLowerCase();
139
- }
140
136
  const DatePickerWrapper = styled_components_1.default.div `
141
137
  color: var(--filter-date-picker-color);
142
138
  display: flex;
@@ -41,12 +41,13 @@ const FORMATS = {
41
41
  function LastUpdated(props) {
42
42
  const { markdown: { lastUpdatedBlock = {} } = {} } = (0, useThemeConfig_1.useThemeConfig)();
43
43
  const { translate } = (0, hooks_1.useTranslate)();
44
+ const { currentLocale } = (0, hooks_1.useI18nConfig)();
44
45
  if (lastUpdatedBlock === null || lastUpdatedBlock === void 0 ? void 0 : lastUpdatedBlock.hide) {
45
46
  return null;
46
47
  }
47
48
  const lastModified = props.lastModified;
48
49
  const format = props.format || lastUpdatedBlock.format || 'timeago';
49
- const locale = props.locale || lastUpdatedBlock.locale || 'en-US';
50
+ const locale = props.locale || lastUpdatedBlock.locale || currentLocale || 'en-US';
50
51
  const isoDate = lastModified.toISOString().split('T')[0];
51
52
  const lastUpdatedString = FORMATS[format](lastModified, locale);
52
53
  const translationKey = format === 'timeago' ? 'theme.page.lastUpdated.timeago' : 'theme.page.lastUpdated.on';
@@ -1,2 +1,4 @@
1
- export declare const ScorecardCard: import("styled-components").StyledComponent<"div", any, {}, never>;
1
+ export declare const ScorecardCard: import("styled-components").StyledComponent<"div", any, {
2
+ 'data-component-name': string;
3
+ }, "data-component-name">;
2
4
  export declare const ScorecardCardTitle: import("styled-components").StyledComponent<"h3", any, {}, never>;
@@ -5,9 +5,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
6
  exports.ScorecardCardTitle = exports.ScorecardCard = void 0;
7
7
  const styled_components_1 = __importDefault(require("styled-components"));
8
- exports.ScorecardCard = styled_components_1.default.div `
8
+ exports.ScorecardCard = styled_components_1.default.div.attrs({
9
+ 'data-component-name': 'Scorecard/ScorecardCard',
10
+ }) `
9
11
  color: var(--text-primary);
10
- background-color: var(--thin-tile-background-color);
12
+ background-color: var(--bg-raised);
11
13
  border-radius: 4px;
12
14
 
13
15
  border: 1px solid var(--border-primary);
@@ -1,8 +1,11 @@
1
1
  /// <reference types="react" />
2
- export declare function Gauge({ chunks, }: {
2
+ export interface GaugeProps {
3
3
  chunks: {
4
4
  share: number;
5
5
  color: string;
6
+ title?: string;
6
7
  }[];
7
- }): JSX.Element;
8
+ className?: string;
9
+ }
10
+ export declare function Gauge({ chunks, className }: GaugeProps): JSX.Element;
8
11
  export declare const GaugeValue: import("styled-components").StyledComponent<"span", any, {}, never>;
@@ -29,8 +29,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
29
29
  exports.GaugeValue = exports.Gauge = void 0;
30
30
  const React = __importStar(require("react"));
31
31
  const styled_components_1 = __importDefault(require("styled-components"));
32
- function Gauge({ chunks, }) {
33
- return (React.createElement(GaugeWrapper, null, chunks.map((chunk, i) => (React.createElement(GaugeChunk, Object.assign({ key: i }, chunk))))));
32
+ function Gauge({ chunks, className }) {
33
+ const title = chunks
34
+ .map((chunk) => chunk.title)
35
+ .filter(Boolean)
36
+ .join(', ');
37
+ return (React.createElement(GaugeWrapper, { "data-component-name": "Scorecard/StatusByLevelWidget", className: className, title: title }, chunks.map((chunk, i) => (React.createElement(GaugeChunk, { key: i, share: chunk.share, color: chunk.color })))));
34
38
  }
35
39
  exports.Gauge = Gauge;
36
40
  exports.GaugeValue = styled_components_1.default.span `
@@ -7,5 +7,6 @@ export interface StatusByLevelWidgetProps {
7
7
  warnings: number;
8
8
  total: number;
9
9
  }[];
10
+ className?: string;
10
11
  }
11
12
  export declare function StatusByLevelWidget(props: StatusByLevelWidgetProps): JSX.Element;
@@ -32,8 +32,8 @@ const styled_components_1 = __importDefault(require("styled-components"));
32
32
  const Gauge_1 = require("../../components/Scorecard/Gauge");
33
33
  const Card_1 = require("../../components/Scorecard/Card");
34
34
  function StatusByLevelWidget(props) {
35
- const { levels, title } = props;
36
- return (React.createElement(Card_1.ScorecardCard, null,
35
+ const { levels, title, className } = props;
36
+ return (React.createElement(Card_1.ScorecardCard, { "data-component-name": "Scorecard/StatusByLevelWidget", className: className },
37
37
  React.createElement(Card_1.ScorecardCardTitle, null, title),
38
38
  React.createElement(CardBody, null, levels.map((level) => {
39
39
  const success = level.total - level.errors - level.warnings;
@@ -43,14 +43,17 @@ function StatusByLevelWidget(props) {
43
43
  {
44
44
  share: (success / level.total) * 100,
45
45
  color: 'var(--scorecard-color-success)',
46
+ title: `${success} passed`,
46
47
  },
47
48
  {
48
49
  share: (level.warnings / level.total) * 100,
49
50
  color: 'var(--scorecard-color-warning)',
51
+ title: `${level.warnings} ${level.warnings === 1 ? 'warning' : 'warnings'}`,
50
52
  },
51
53
  {
52
54
  share: (level.errors / level.total) * 100,
53
55
  color: 'var(--scorecard-color-error)',
56
+ title: `${level.errors} ${level.errors === 1 ? 'error' : 'errors'}`,
54
57
  },
55
58
  ] }),
56
59
  React.createElement(Gauge_1.GaugeValue, null,
@@ -16,7 +16,7 @@ exports.sidebar = (0, styled_components_1.css) `
16
16
  /**
17
17
  * @tokens Sidebar typography
18
18
  */
19
- --sidebar-word-break: inherit; // @presenter WordBreak
19
+ --sidebar-word-break: inherit;
20
20
 
21
21
  /**
22
22
  * @tokens Sidebar colors
package/lib/config.d.ts CHANGED
@@ -24,7 +24,6 @@ declare const markdownConfigSchema: {
24
24
  };
25
25
  readonly locale: {
26
26
  readonly type: "string";
27
- readonly default: "en-US";
28
27
  };
29
28
  };
30
29
  readonly additionalProperties: false;
@@ -280,7 +279,7 @@ declare const catalogFilterSchema: {
280
279
  declare const scorecardConfigSchema: {
281
280
  readonly type: "object";
282
281
  readonly additionalProperties: true;
283
- readonly required: readonly ["levels"];
282
+ readonly required: readonly [];
284
283
  readonly properties: {
285
284
  readonly ignoreNonCompliant: {
286
285
  readonly type: "boolean";
@@ -309,6 +308,9 @@ declare const scorecardConfigSchema: {
309
308
  readonly name: {
310
309
  readonly type: "string";
311
310
  };
311
+ readonly color: {
312
+ readonly type: "string";
313
+ };
312
314
  readonly extends: {
313
315
  readonly type: "array";
314
316
  readonly items: {
@@ -871,14 +873,6 @@ export declare const themeConfigSchema: {
871
873
  };
872
874
  readonly additionalProperties: false;
873
875
  };
874
- readonly seo: {
875
- readonly type: "object";
876
- readonly properties: {
877
- readonly title: {
878
- readonly type: "string";
879
- };
880
- };
881
- };
882
876
  readonly scripts: {
883
877
  readonly type: "object";
884
878
  readonly properties: {
@@ -1315,7 +1309,6 @@ export declare const themeConfigSchema: {
1315
1309
  };
1316
1310
  readonly locale: {
1317
1311
  readonly type: "string";
1318
- readonly default: "en-US";
1319
1312
  };
1320
1313
  };
1321
1314
  readonly additionalProperties: false;
@@ -1849,7 +1842,7 @@ export declare const themeConfigSchema: {
1849
1842
  readonly scorecard: {
1850
1843
  readonly type: "object";
1851
1844
  readonly additionalProperties: true;
1852
- readonly required: readonly ["levels"];
1845
+ readonly required: readonly [];
1853
1846
  readonly properties: {
1854
1847
  readonly ignoreNonCompliant: {
1855
1848
  readonly type: "boolean";
@@ -1878,6 +1871,9 @@ export declare const themeConfigSchema: {
1878
1871
  readonly name: {
1879
1872
  readonly type: "string";
1880
1873
  };
1874
+ readonly color: {
1875
+ readonly type: "string";
1876
+ };
1881
1877
  readonly extends: {
1882
1878
  readonly type: "array";
1883
1879
  readonly items: {
package/lib/config.js CHANGED
@@ -73,7 +73,7 @@ const markdownConfigSchema = {
73
73
  type: 'string',
74
74
  enum: ['timeago', 'iso', 'long', 'short'],
75
75
  default: 'timeago',
76
- }, locale: { type: 'string', default: 'en-US' } }, hideConfigSchema.properties),
76
+ }, locale: { type: 'string' } }, hideConfigSchema.properties),
77
77
  additionalProperties: false,
78
78
  default: {},
79
79
  },
@@ -262,7 +262,7 @@ const catalogFilterSchema = {
262
262
  const scorecardConfigSchema = {
263
263
  type: 'object',
264
264
  additionalProperties: true,
265
- required: ['levels'],
265
+ required: [],
266
266
  properties: {
267
267
  ignoreNonCompliant: { type: 'boolean', default: false },
268
268
  teamMetadataProperty: {
@@ -280,6 +280,7 @@ const scorecardConfigSchema = {
280
280
  required: ['name'],
281
281
  properties: {
282
282
  name: { type: 'string' },
283
+ color: { type: 'string' },
283
284
  extends: { type: 'array', items: { type: 'string' } },
284
285
  rules: {
285
286
  type: 'object',
@@ -371,12 +372,6 @@ exports.themeConfigSchema = {
371
372
  } }, hideConfigSchema.properties),
372
373
  additionalProperties: false,
373
374
  },
374
- seo: {
375
- type: 'object',
376
- properties: {
377
- title: { type: 'string' },
378
- },
379
- },
380
375
  scripts: {
381
376
  type: 'object',
382
377
  properties: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@redocly/theme",
3
- "version": "0.30.2",
3
+ "version": "0.30.3-beta.1",
4
4
  "description": "Shared UI components lib",
5
5
  "keywords": [
6
6
  "theme",
@@ -28,19 +28,18 @@
28
28
  "styled-system": "^5.1.5"
29
29
  },
30
30
  "devDependencies": {
31
- "@storybook/addon-actions": "^6.5.9",
32
- "@storybook/addon-essentials": "^6.5.9",
33
- "@storybook/addon-interactions": "^6.5.9",
34
- "@storybook/addon-links": "^6.5.9",
35
- "@storybook/addon-viewport": "^6.5.9",
36
- "@storybook/addons": "^6.5.9",
37
- "@storybook/builder-webpack5": "^6.5.9",
38
- "@storybook/core-common": "^6.5.9",
39
- "@storybook/manager-webpack5": "^6.5.9",
40
- "@storybook/node-logger": "^6.5.9",
41
- "@storybook/react": "^6.5.9",
42
- "@storybook/testing-library": "^0.0.13",
43
- "@storybook/theming": "^6.5.9",
31
+ "@storybook/addon-actions": "^7.4.6",
32
+ "@storybook/addon-essentials": "^7.4.6",
33
+ "@storybook/addon-interactions": "^7.4.6",
34
+ "@storybook/addon-links": "^7.4.6",
35
+ "@storybook/addon-viewport": "^7.4.6",
36
+ "@storybook/addons": "^7.4.6",
37
+ "@storybook/core-common": "^7.4.6",
38
+ "@storybook/node-logger": "^7.4.6",
39
+ "@storybook/react": "^7.4.6",
40
+ "@storybook/react-webpack5": "^7.4.6",
41
+ "@storybook/testing-library": "^0.2.2",
42
+ "@storybook/theming": "^7.4.6",
44
43
  "@testing-library/jest-dom": "^5.16.5",
45
44
  "@testing-library/react": "^12.1.4",
46
45
  "@testing-library/react-hooks": "^8.0.1",
@@ -69,8 +68,9 @@
69
68
  "npm-run-all": "^4.1.5",
70
69
  "react-refresh": "^0.14.0",
71
70
  "react-router-dom": "^6.10.0",
72
- "storybook-addon-pseudo-states": "^1.15.1",
73
- "storybook-design-token": "^2.9.0",
71
+ "storybook": "^7.4.6",
72
+ "storybook-addon-pseudo-states": "^2.1.2",
73
+ "storybook-design-token": "3.0.0-beta.6",
74
74
  "styled-components": "^5.3.7",
75
75
  "styled-system": "^5.1.5",
76
76
  "ts-jest": "^29.0.3",
@@ -105,8 +105,8 @@
105
105
  "test:coverage": "jest --coverage",
106
106
  "test:coverage:html": "jest --coverage --coverageReporters html",
107
107
  "e2e": "npx chromatic -b storybook:build --auto-accept-changes main --exit-once-uploaded",
108
- "storybook": "start-storybook -p 6006",
109
- "storybook:build": "npm run storybook:tokens && build-storybook",
108
+ "storybook": "storybook dev -p 6006",
109
+ "storybook:build": "npm run storybook:tokens && storybook build",
110
110
  "storybook:tokens": "ts-node scripts/generate-css-tokens.ts",
111
111
  "storybook:tokens:watch": "ts-node-dev --respawn scripts/generate-css-tokens.ts",
112
112
  "chromatic": "chromatic --exit-zero-on-changes"
@@ -299,9 +299,12 @@ function collectFilterOptions(
299
299
  }
300
300
  }
301
301
 
302
- const options = Object.entries(usedOptions)
303
- .map(([value, count]) => ({ value, count }))
304
- .sort((a, b) => b.value.localeCompare(a.value));
302
+ const options = Object.entries(usedOptions).map(([value, count]) => ({ value, count }));
303
+
304
+ if (!staticOptions) {
305
+ options.sort((a, b) => b.value.localeCompare(a.value));
306
+ }
307
+
305
308
  if (othersCount) {
306
309
  options.push({
307
310
  value: filter.missingCategoryNameTranslationKey || filter.missingCategoryName || 'Others',
@@ -109,7 +109,7 @@ export function Filter({
109
109
  </>
110
110
  ) : (
111
111
  filter.filteredOptions.map((value: any) => {
112
- const id = 'filter--' + filter.property + '--' + slug(value.value);
112
+ const id = 'filter--' + filter.property + '--' + value.value;
113
113
  return (
114
114
  <FilterOption key={id} role="link" onClick={() => filter.toggleOption(value.value)}>
115
115
  <CheckboxIcon checked={filter.selectedOptions.has(value.value)} />
@@ -210,11 +210,6 @@ const StyledSelect = styled(Select)`
210
210
  }
211
211
  `;
212
212
 
213
- // TODO: import from portal
214
- function slug(str: string): string {
215
- return str.replace(/\s/g, '-').toLowerCase();
216
- }
217
-
218
213
  const DatePickerWrapper = styled.div`
219
214
  color: var(--filter-date-picker-color);
220
215
  display: flex;
@@ -3,7 +3,7 @@ import styled from 'styled-components';
3
3
  import { format } from 'timeago.js';
4
4
 
5
5
  import { useThemeConfig } from '@theme/hooks/useThemeConfig';
6
- import { useTranslate } from '@portal/hooks';
6
+ import { useI18nConfig, useTranslate } from '@portal/hooks';
7
7
 
8
8
  const FORMATS = {
9
9
  timeago: (date: Date, locale: string) => format(date, locale),
@@ -24,6 +24,7 @@ export interface LastUpdatedProps {
24
24
  export function LastUpdated(props: LastUpdatedProps): JSX.Element | null {
25
25
  const { markdown: { lastUpdatedBlock = {} } = {} } = useThemeConfig();
26
26
  const { translate } = useTranslate();
27
+ const { currentLocale } = useI18nConfig();
27
28
 
28
29
  if (lastUpdatedBlock?.hide) {
29
30
  return null;
@@ -31,7 +32,8 @@ export function LastUpdated(props: LastUpdatedProps): JSX.Element | null {
31
32
 
32
33
  const lastModified = props.lastModified;
33
34
  const format = props.format || lastUpdatedBlock.format || 'timeago';
34
- const locale = props.locale || lastUpdatedBlock.locale || 'en-US';
35
+ const locale = props.locale || lastUpdatedBlock.locale || currentLocale || 'en-US';
36
+
35
37
  const isoDate = lastModified.toISOString().split('T')[0];
36
38
 
37
39
  const lastUpdatedString = FORMATS[format as keyof typeof FORMATS](lastModified, locale);
@@ -1,8 +1,10 @@
1
1
  import styled from 'styled-components';
2
2
 
3
- export const ScorecardCard = styled.div`
3
+ export const ScorecardCard = styled.div.attrs({
4
+ 'data-component-name': 'Scorecard/ScorecardCard',
5
+ })`
4
6
  color: var(--text-primary);
5
- background-color: var(--thin-tile-background-color);
7
+ background-color: var(--bg-raised);
6
8
  border-radius: 4px;
7
9
 
8
10
  border: 1px solid var(--border-primary);
@@ -1,18 +1,27 @@
1
1
  import * as React from 'react';
2
2
  import styled from 'styled-components';
3
-
4
- export function Gauge({
5
- chunks,
6
- }: {
3
+ export interface GaugeProps {
7
4
  chunks: {
8
5
  share: number;
9
6
  color: string;
7
+ title?: string;
10
8
  }[];
11
- }) {
9
+ className?: string;
10
+ }
11
+
12
+ export function Gauge({ chunks, className }: GaugeProps) {
13
+ const title = chunks
14
+ .map((chunk) => chunk.title)
15
+ .filter(Boolean)
16
+ .join(', ');
12
17
  return (
13
- <GaugeWrapper>
18
+ <GaugeWrapper
19
+ data-component-name="Scorecard/StatusByLevelWidget"
20
+ className={className}
21
+ title={title}
22
+ >
14
23
  {chunks.map((chunk, i) => (
15
- <GaugeChunk key={i} {...chunk} />
24
+ <GaugeChunk key={i} share={chunk.share} color={chunk.color} />
16
25
  ))}
17
26
  </GaugeWrapper>
18
27
  );
@@ -7,12 +7,13 @@ import { ScorecardCard, ScorecardCardTitle } from '@theme/components/Scorecard/C
7
7
  export interface StatusByLevelWidgetProps {
8
8
  title: string;
9
9
  levels: { name: string; errors: number; warnings: number; total: number }[];
10
+ className?: string;
10
11
  }
11
12
 
12
13
  export function StatusByLevelWidget(props: StatusByLevelWidgetProps) {
13
- const { levels, title } = props;
14
+ const { levels, title, className } = props;
14
15
  return (
15
- <ScorecardCard>
16
+ <ScorecardCard data-component-name="Scorecard/StatusByLevelWidget" className={className}>
16
17
  <ScorecardCardTitle>{title}</ScorecardCardTitle>
17
18
  <CardBody>
18
19
  {levels.map((level) => {
@@ -25,14 +26,17 @@ export function StatusByLevelWidget(props: StatusByLevelWidgetProps) {
25
26
  {
26
27
  share: (success / level.total) * 100,
27
28
  color: 'var(--scorecard-color-success)',
29
+ title: `${success} passed`,
28
30
  },
29
31
  {
30
32
  share: (level.warnings / level.total) * 100,
31
33
  color: 'var(--scorecard-color-warning)',
34
+ title: `${level.warnings} ${level.warnings === 1 ? 'warning' : 'warnings'}`,
32
35
  },
33
36
  {
34
37
  share: (level.errors / level.total) * 100,
35
38
  color: 'var(--scorecard-color-error)',
39
+ title: `${level.errors} ${level.errors === 1 ? 'error' : 'errors'}`,
36
40
  },
37
41
  ]}
38
42
  />
@@ -14,7 +14,7 @@ export const sidebar = css`
14
14
  /**
15
15
  * @tokens Sidebar typography
16
16
  */
17
- --sidebar-word-break: inherit; // @presenter WordBreak
17
+ --sidebar-word-break: inherit;
18
18
 
19
19
  /**
20
20
  * @tokens Sidebar colors
package/src/config.ts CHANGED
@@ -80,7 +80,7 @@ const markdownConfigSchema = {
80
80
  enum: ['timeago', 'iso', 'long', 'short'],
81
81
  default: 'timeago',
82
82
  },
83
- locale: { type: 'string', default: 'en-US' },
83
+ locale: { type: 'string' },
84
84
  ...hideConfigSchema.properties,
85
85
  },
86
86
  additionalProperties: false,
@@ -301,7 +301,7 @@ const catalogFilterSchema = {
301
301
  const scorecardConfigSchema = {
302
302
  type: 'object',
303
303
  additionalProperties: true,
304
- required: ['levels'],
304
+ required: [],
305
305
  properties: {
306
306
  ignoreNonCompliant: { type: 'boolean', default: false },
307
307
  teamMetadataProperty: {
@@ -319,6 +319,7 @@ const scorecardConfigSchema = {
319
319
  required: ['name'],
320
320
  properties: {
321
321
  name: { type: 'string' },
322
+ color: { type: 'string' },
322
323
  extends: { type: 'array', items: { type: 'string' } },
323
324
  rules: {
324
325
  type: 'object',
@@ -425,12 +426,6 @@ export const themeConfigSchema = {
425
426
  },
426
427
  additionalProperties: false,
427
428
  },
428
- seo: {
429
- type: 'object',
430
- properties: {
431
- title: { type: 'string' },
432
- },
433
- },
434
429
  scripts: {
435
430
  type: 'object',
436
431
  properties: {