@redocly/theme 0.83.0-rc.5 → 0.83.0-rc.6

package/lib/components/Markdown/styles/baseTable.js

@@ -3,6 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.markdownBaseTableCss = void 0;
 const styled_components_1 = require("styled-components");
 exports.markdownBaseTableCss = (0, styled_components_1.css) `
+  .md-table-wrapper {
+    overflow-x: auto;
+  }
+
   table.md {
     width: 100%;
     overflow: hidden;

package/lib/components/Menu/MenuItem.js

@@ -61,6 +61,7 @@ function MenuItem(props) {
         }
     };
     const chevron = hasChevron ? (isExpanded ? (react_1.default.createElement(ChevronDownIcon_1.ChevronDownIcon, { size: "var(--menu-item-label-chevron-size)", color: "--tree-content-color-default" })) : (react_1.default.createElement(ChevronRightIcon_1.ChevronRightIcon, { size: "var(--menu-item-label-chevron-size)", color: "--tree-content-color-default" }))) : null;
+    const httpColor = item.deprecated ? 'http-deprecated' : item.httpVerb;
     const label = item.label && (react_1.default.createElement(MenuItemLabelWrapper, { active: item.active, deprecated: item.deprecated, depth: depth, withChevron: hasChevron, onClick: handleOnClick, ref: labelRef, role: item.link ? 'none' : 'link' },
         chevron,
         item.icon ? react_1.default.createElement(MenuItemIcon, { src: item.icon }) : null,
@@ -71,7 +72,7 @@ function MenuItem(props) {
                 item.external ? react_1.default.createElement(LaunchIcon_1.LaunchIcon, { size: "var(--menu-item-external-icon-size)" }) : null),
             item.sublabel ? (react_1.default.createElement(MenuItemSubLabel, null, translate(item.subLabelTranslationKey, item.sublabel))) : null),
         isDrilldown ? react_1.default.createElement(ArrowRightIcon_1.ArrowRightIcon, { size: "12px" }) : null,
-        isOperation ? (react_1.default.createElement(HttpTag_1.HttpTag, { color: item.httpVerb || '' }, item.httpVerb === 'hook' ? 'event' : item.httpVerb)) : null));
+        isOperation ? (react_1.default.createElement(HttpTag_1.HttpTag, { color: httpColor || '' }, item.httpVerb === 'hook' ? 'event' : item.httpVerb)) : null));
     return (react_1.default.createElement(MenuItemWrapper, { "data-component-name": "Menu/MenuItem", className: generateClassName({ type, item, className }) },
         item.link ? (react_1.default.createElement(MenuItemLink, { to: item.link, external: item.external, target: item.target, languageInsensitive: item.languageInsensitive }, label)) : (label),
         isNested ? (react_1.default.createElement(MenuItemNestedWrapper, { depth: depth, ref: nestedMenuRef, style: style }, isExpanded || !canUnmount ? props.children : null)) : null,
@@ -163,7 +164,7 @@ const MenuItemLabelWrapper = styled_components_1.default.li `
 
   ${({ active, deprecated }) => active &&
     (0, styled_components_1.css) `
-      color: ${deprecated ? '(--menu-content-color-disabled)' : 'var(--menu-item-color-active)'};
+      color: ${deprecated ? 'var(--menu-content-color-disabled)' : 'var(--menu-item-color-active)'};
       background-color: var(--menu-item-bg-color-active);
 
       &:hover {

package/lib/components/Search/SearchItem.js

@@ -33,6 +33,7 @@ const HttpTag_1 = require("../../components/Tags/HttpTag");
 const Link_1 = require("../../components/Link/Link");
 const Image_1 = require("../../components/Image/Image");
 const SearchHighlight_1 = require("../../components/Search/SearchHighlight");
+const Badge_1 = require("../../components/Badge/Badge");
 function SearchItem({ item, className, product }) {
     var _a, _b, _c, _d;
     const ref = (0, react_1.useRef)();
@@ -51,7 +52,9 @@ function SearchItem({ item, className, product }) {
             item.httpVerb ? (react_1.default.createElement(SearchItemOperation, null,
                 react_1.default.createElement(SearchItemOperationTag, { color: item.httpVerb }, item.httpVerb.toUpperCase()),
                 item.pathName ? (0, SearchHighlight_1.highlight)(item.pathName) : null)) : null,
-            react_1.default.createElement(SearchItemTitle, null, (0, SearchHighlight_1.highlight)(item.title)),
+            react_1.default.createElement(SearchItemTitleWrapper, null,
+                react_1.default.createElement(SearchItemTitle, null, (0, SearchHighlight_1.highlight)(item.title)),
+                item.deprecated ? react_1.default.createElement(SearchItemBadge, { deprecated: true }, "Deprecated") : null),
             Array.isArray(item.text) ? (react_1.default.createElement(SearchItemDescription, null, (0, SearchHighlight_1.highlight)(item.text))) : null),
         itemParam ? (react_1.default.createElement(SearchItemPlace, null,
             react_1.default.createElement("div", null,
@@ -86,6 +89,10 @@ const SearchItemWrapper = (0, styled_components_1.default)(Link_1.Link) `
 const SearchItemHeader = styled_components_1.default.div `
   position: relative;
 `;
+const SearchItemTitleWrapper = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+`;
 const SearchItemTitle = styled_components_1.default.div `
   overflow: hidden;
   text-overflow: ellipsis;
@@ -95,6 +102,11 @@ const SearchItemTitle = styled_components_1.default.div `
   font-weight: var(--search-item-title-font-weight);
   line-height: var(--search-item-title-line-height);
 `;
+const SearchItemBadge = (0, styled_components_1.default)(Badge_1.Badge) `
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-sm);
+  font-weight: var(--font-weight-regular);
+`;
 const SearchItemOperation = styled_components_1.default.div `
   display: inline-flex;
   align-items: baseline;

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

@@ -3,7 +3,8 @@ type DefaultStatusColor = 'success' | 'processing' | 'error' | 'warning' | 'defa
 type ActionStatusColor = 'approved' | 'declined' | 'pending';
 type SubjectStatusColor = 'active' | 'draft' | 'deprecated' | 'product';
 type HttpColor = 'get' | 'post' | 'put' | 'delete' | 'option' | 'patch' | 'head' | 'hook' | 'link';
-type StatusColor = DefaultStatusColor | ActionStatusColor | SubjectStatusColor | HttpColor;
+type HttpStatusColor = 'http-deprecated';
+type StatusColor = DefaultStatusColor | ActionStatusColor | SubjectStatusColor | HttpColor | HttpStatusColor;
 type Color = 'red' | 'green' | 'blue' | 'grey' | 'gold' | 'cyan' | 'magenta' | 'purple' | 'lime' | 'geekblue' | 'yellow';
 export type TagProps = {
     className?: string;

package/lib/components/Tag/variables.js

@@ -163,6 +163,7 @@ exports.tag = (0, styled_components_1.css) `
   --tag-operation-color-post: #1E65F5;
   --tag-operation-color-put: #F5901D;
   --tag-operation-color-patch: #F5C31D;
+  --tag-operation-color-deprecated: var(--text-color-disabled);
 
   .tag-delete {
       --tag-color: var(--tag-operation-color-delete); // @presenter Color
@@ -183,6 +184,10 @@ exports.tag = (0, styled_components_1.css) `
       --tag-color: var(--tag-operation-color-patch); // @presenter Color
   }
 
+  .tag-http-deprecated {
+      --tag-color: var(--tag-operation-color-deprecated) // @presenter Color
+  }
+
   // @tokens End
 `;
 //# sourceMappingURL=variables.js.map

package/lib/core/types/search.d.ts

@@ -13,6 +13,7 @@ export type SearchDocument = {
     text: string | string[];
     path?: string[];
     httpVerb?: string;
+    deprecated?: boolean;
     pathName?: string | string[];
     parameters?: OperationParameter[];
     metadata?: Record<string, any>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.83.0-rc.5",
+  "version": "0.83.0-rc.6",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -98,7 +98,7 @@
     "timeago.js": "^4.0.2",
     "i18next": "^22.4.12",
     "nprogress": "^0.2.0",
-    "@redocly/config": "0.83.0-rc.5"
+    "@redocly/config": "0.83.0-rc.6"
   },
   "scripts": {
     "start": "npm-run-all --parallel storybook storybook:tokens:watch",

package/src/components/Markdown/styles/baseTable.ts

@@ -1,6 +1,10 @@
 import { css } from 'styled-components';
 
 export const markdownBaseTableCss = css`
+  .md-table-wrapper {
+    overflow-x: auto;
+  }
+
   table.md {
     width: 100%;
     overflow: hidden;

package/src/components/Menu/MenuItem.tsx

@@ -55,6 +55,7 @@ export function MenuItem(props: React.PropsWithChildren<MenuItemProps>): JSX.Ele
     )
   ) : null;
 
+  const httpColor = item.deprecated ? 'http-deprecated' : item.httpVerb;
   const label = item.label && (
     <MenuItemLabelWrapper
       active={item.active}
@@ -86,7 +87,7 @@ export function MenuItem(props: React.PropsWithChildren<MenuItemProps>): JSX.Ele
 
       {isDrilldown ? <ArrowRightIcon size="12px" /> : null}
       {isOperation ? (
-        <HttpTag color={item.httpVerb || ''}>
+        <HttpTag color={httpColor || ''}>
           {item.httpVerb === 'hook' ? 'event' : item.httpVerb}
         </HttpTag>
       ) : null}
@@ -232,7 +233,7 @@ const MenuItemLabelWrapper = styled.li<{
   ${({ active, deprecated }) =>
     active &&
     css`
-      color: ${deprecated ? '(--menu-content-color-disabled)' : 'var(--menu-item-color-active)'};
+      color: ${deprecated ? 'var(--menu-content-color-disabled)' : 'var(--menu-item-color-active)'};
       background-color: var(--menu-item-bg-color-active);
 
       &:hover {

package/src/components/Search/SearchItem.tsx

@@ -7,6 +7,7 @@ import { HttpTag } from '@redocly/theme/components/Tags/HttpTag';
 import { Link } from '@redocly/theme/components/Link/Link';
 import { Image } from '@redocly/theme/components/Image/Image';
 import { highlight } from '@redocly/theme/components/Search/SearchHighlight';
+import { Badge } from '@redocly/theme/components/Badge/Badge';
 
 type ActiveItem<T> = T & { active?: boolean };
 export type SearchItemProps = {
@@ -52,7 +53,10 @@ export function SearchItem({ item, className, product }: SearchItemProps): JSX.E
             {item.pathName ? highlight(item.pathName) : null}
           </SearchItemOperation>
         ) : null}
-        <SearchItemTitle>{highlight(item.title)}</SearchItemTitle>
+        <SearchItemTitleWrapper>
+          <SearchItemTitle>{highlight(item.title)}</SearchItemTitle>
+          {item.deprecated ? <SearchItemBadge deprecated>Deprecated</SearchItemBadge> : null}
+        </SearchItemTitleWrapper>
         {Array.isArray(item.text) ? (
           <SearchItemDescription>{highlight(item.text)}</SearchItemDescription>
         ) : null}
@@ -102,6 +106,11 @@ const SearchItemHeader = styled.div`
   position: relative;
 `;
 
+const SearchItemTitleWrapper = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
 const SearchItemTitle = styled.div`
   overflow: hidden;
   text-overflow: ellipsis;
@@ -112,6 +121,12 @@ const SearchItemTitle = styled.div`
   line-height: var(--search-item-title-line-height);
 `;
 
+const SearchItemBadge = styled(Badge)`
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-sm);
+  font-weight: var(--font-weight-regular);
+`;
+
 const SearchItemOperation = styled.div`
   display: inline-flex;
   align-items: baseline;

package/src/components/Tag/Tag.tsx

@@ -5,7 +5,13 @@ type DefaultStatusColor = 'success' | 'processing' | 'error' | 'warning' | 'defa
 type ActionStatusColor = 'approved' | 'declined' | 'pending';
 type SubjectStatusColor = 'active' | 'draft' | 'deprecated' | 'product';
 type HttpColor = 'get' | 'post' | 'put' | 'delete' | 'option' | 'patch' | 'head' | 'hook' | 'link';
-type StatusColor = DefaultStatusColor | ActionStatusColor | SubjectStatusColor | HttpColor;
+type HttpStatusColor = 'http-deprecated';
+type StatusColor =
+  | DefaultStatusColor
+  | ActionStatusColor
+  | SubjectStatusColor
+  | HttpColor
+  | HttpStatusColor;
 type Color =
   | 'red'
   | 'green'

package/src/components/Tag/variables.ts

@@ -161,6 +161,7 @@ export const tag = css`
   --tag-operation-color-post: #1E65F5;
   --tag-operation-color-put: #F5901D;
   --tag-operation-color-patch: #F5C31D;
+  --tag-operation-color-deprecated: var(--text-color-disabled);
 
   .tag-delete {
       --tag-color: var(--tag-operation-color-delete); // @presenter Color
@@ -181,5 +182,9 @@ export const tag = css`
       --tag-color: var(--tag-operation-color-patch); // @presenter Color
   }
 
+  .tag-http-deprecated {
+      --tag-color: var(--tag-operation-color-deprecated) // @presenter Color
+  }
+
   // @tokens End
 `;

package/src/core/types/search.ts

@@ -15,6 +15,7 @@ export type SearchDocument = {
   text: string | string[];
   path?: string[];
   httpVerb?: string;
+  deprecated?: boolean;
   pathName?: string | string[];
   parameters?: OperationParameter[];
   metadata?: Record<string, any>;