@redocly/theme 0.19.5 → 0.19.6

package/lib/components/Catalog/CatalogCard.js

@@ -48,7 +48,7 @@ function CatalogCard({ item }) {
                 React.createElement(CardFooter, null,
                     hasTags && (React.createElement(CardTags, null,
                         (item.tags || []).map((tag, index) => (React.createElement(CardTag, { key: tag + index, color: (0, utils_1.slug)(tag) },
-                            React.createElement(Highlight_1.Highlight, null, tag)))),
+                            React.createElement(Highlight_1.Highlight, null, (0, utils_1.capitalize)(tag))))),
                         (item.scorecardLevel && item.scorecardStatus && (React.createElement(CardTag, { color: statusToColor(item.scorecardStatus), className: "tag-variant-scorecard-level" },
                             React.createElement(Highlight_1.Highlight, null, item.scorecardLevel)))) ||
                             null)),
@@ -71,6 +71,7 @@ function statusToColor(status) {
 const SelectButton = styled_components_1.default.div `
   border: 1px solid var(--catalog-card-button-border-color);
   border-radius: 100%;
+  min-width: var(--catalog-card-button-width);
   width: var(--catalog-card-button-width);
   height: var(--catalog-card-button-height);
   display: flex;
@@ -147,6 +148,8 @@ const CardTags = styled_components_1.default.div `
   min-height: var(--spacing-xl);
 `;
 const CardTag = (0, styled_components_1.default)(Tag_1.Tag) `
+  display: block;
+  text-transform: inherit;
   margin: 0;
 `;
 //# sourceMappingURL=CatalogCard.js.map

package/lib/utils/index.d.ts

@@ -10,3 +10,4 @@ export * from './color';
 export * from './urls';
 export * from './jsUtils';
 export * from './tags-parser';
+export * from './text-transform';

package/lib/utils/index.js

@@ -26,4 +26,5 @@ __exportStar(require("./color"), exports);
 __exportStar(require("./urls"), exports);
 __exportStar(require("./jsUtils"), exports);
 __exportStar(require("./tags-parser"), exports);
+__exportStar(require("./text-transform"), exports);
 //# sourceMappingURL=index.js.map

package/lib/utils/text-transform.d.ts

@@ -0,0 +1 @@
+export declare function capitalize(input: string): string;

package/lib/utils/text-transform.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.capitalize = void 0;
+function capitalize(input) {
+    return input.charAt(0).toUpperCase() + input.slice(1);
+}
+exports.capitalize = capitalize;
+//# sourceMappingURL=text-transform.js.map

package/package.json

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

package/src/components/Catalog/CatalogCard.tsx

@@ -7,7 +7,7 @@ import { Highlight } from '@theme/ui/Highlight';
 import { Tag } from '@theme/components/Tag';
 import { PointingArrowIcon } from '@theme/icons';
 import { telemetry } from '@portal/telemetry';
-import { slug } from '@theme/utils';
+import { slug, capitalize } from '@theme/utils';
 
 export function CatalogCard({ item }: { item: CatalogItem }): JSX.Element {
   const hasTags = item.scorecardStatus || item.tags?.length;
@@ -26,7 +26,7 @@ export function CatalogCard({ item }: { item: CatalogItem }): JSX.Element {
               <CardTags>
                 {((item.tags as string[]) || []).map((tag, index) => (
                   <CardTag key={tag + index} color={slug(tag)}>
-                    <Highlight>{tag}</Highlight>
+                    <Highlight>{capitalize(tag)}</Highlight>
                   </CardTag>
                 ))}
                 {(item.scorecardLevel && item.scorecardStatus && (
@@ -66,6 +66,7 @@ function statusToColor(status: string) {
 const SelectButton = styled.div`
   border: 1px solid var(--catalog-card-button-border-color);
   border-radius: 100%;
+  min-width: var(--catalog-card-button-width);
   width: var(--catalog-card-button-width);
   height: var(--catalog-card-button-height);
   display: flex;
@@ -149,5 +150,7 @@ const CardTags = styled.div`
 `;
 
 const CardTag = styled(Tag)`
+  display: block;
+  text-transform: inherit;
   margin: 0;
 `;

package/src/utils/index.ts

@@ -10,3 +10,4 @@ export * from './color';
 export * from './urls';
 export * from './jsUtils';
 export * from './tags-parser';
+export * from './text-transform';

package/src/utils/text-transform.ts

@@ -0,0 +1,3 @@
+export function capitalize(input: string): string {
+  return input.charAt(0).toUpperCase() + input.slice(1);
+}