@pushwoosh/smart-components-kit 1.1.8 → 1.1.9

package/Table/components/ItemDetailLink/ItemDetailLink.d.ts

@@ -0,0 +1,6 @@
+import { type ComponentProps } from 'react';
+declare const StyledItemDetailLink: import("styled-components").StyledComponent<"a", any, {}, never>;
+export declare function ItemDetailLink({ withChevron, children, ...props }: ComponentProps<typeof StyledItemDetailLink> & {
+    withChevron?: boolean;
+}): import("react").JSX.Element;
+export {};

package/Table/components/ItemDetailLink/ItemDetailLink.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from 'styled-components';
+import { Color, FontWeight } from '@pushwoosh/kit-constants';
+import { ChevronIcon } from '@pushwoosh/kit-icons';
+const StyledItemDetailLink = styled.a.withConfig({
+  displayName: "StyledItemDetailLink",
+  componentId: "sc-v0vtp2-0"
+})(["display:flex;align-items:center;text-decoration:none;font-weight:", ";color:", ";width:100%;min-width:0;&:hover{text-decoration:none;color:", ";}"], FontWeight.MEDIUM, Color.MAIN, Color.PRIMARY_HOVER);
+const Truncate = styled.span.withConfig({
+  displayName: "Truncate",
+  componentId: "sc-v0vtp2-1"
+})(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;"]);
+const Chevron = styled(ChevronIcon).withConfig({
+  displayName: "Chevron",
+  componentId: "sc-v0vtp2-2"
+})(["flex-shrink:0;"]);
+export function ItemDetailLink({
+  withChevron,
+  children,
+  ...props
+}) {
+  if (!withChevron) return _jsx(StyledItemDetailLink, {
+    ...props,
+    children: children
+  });
+  return _jsxs(StyledItemDetailLink, {
+    ...props,
+    children: [_jsx(Truncate, {
+      children: children
+    }), _jsx(Chevron, {
+      size: "small",
+      direction: "right"
+    })]
+  });
+}

package/Table/components/ItemDetailLink/index.d.ts

@@ -0,0 +1 @@
+export { ItemDetailLink } from './ItemDetailLink';

package/Table/components/ItemDetailLink/index.js

@@ -0,0 +1 @@
+export { ItemDetailLink } from './ItemDetailLink';

package/Table/index.d.ts

@@ -6,5 +6,6 @@ export { DataTableSortableCell } from './components/DataTableSortableCell';
 export { Loading } from './components/Loading';
 export { TablePagination } from './components/TablePagination';
 export { useDataTableContext, useDataTableGetParams } from './hooks';
-export { Table, Td, Tr, Th, ElementHover, ItemDetailLink, ItemName, LockedText, Description, } from './styles';
+export { Table, Td, Tr, Th, ElementHover, ItemName, LockedText, Description, } from './styles';
+export { ItemDetailLink } from './components/ItemDetailLink';
 export type { DataTableParams, DataTableData, DataTableContextType } from './types';

package/Table/index.js

@@ -6,4 +6,5 @@ export { DataTableSortableCell } from './components/DataTableSortableCell';
 export { Loading } from './components/Loading';
 export { TablePagination } from './components/TablePagination';
 export { useDataTableContext, useDataTableGetParams } from './hooks';
-export { Table, Td, Tr, Th, ElementHover, ItemDetailLink, ItemName, LockedText, Description } from './styles';
+export { Table, Td, Tr, Th, ElementHover, ItemName, LockedText, Description } from './styles';
+export { ItemDetailLink } from './components/ItemDetailLink';

package/Table/styles.d.ts

@@ -60,7 +60,6 @@ export declare const Th: import("styled-components").StyledComponent<"div", any,
 } & {
     $color?: string;
 }, "$padding">;
-export declare const ItemDetailLink: import("styled-components").StyledComponent<"a", any, {}, never>;
 export declare const ItemName: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Description: import("styled-components").StyledComponent<"div", any, {
     $maxLines?: number;

package/Table/styles.js

@@ -1,5 +1,5 @@
 import styled, { css } from 'styled-components';
-import { Color, FontSize, FontWeight, ShapeRadius } from '@pushwoosh/kit-constants';
+import { Color, FontSize, FontWeight, LineHeight, ShapeRadius } from '@pushwoosh/kit-constants';
 import { GridContainer, Horizontal, Vertical, toCssValue } from '@pushwoosh/kit-helpers';
 export const Table = styled(Vertical).withConfig({
   displayName: "Table",
@@ -30,31 +30,27 @@ export const Tr = styled(Horizontal).attrs({
 }).withConfig({
   displayName: "Tr",
   componentId: "sc-1vdjaze-3"
-})(["grid-template-columns:var(--table-columns);&:hover{background-color:#89A4BF0D;}&:hover ", "{display:block;}"], ElementHover);
+})(["grid-template-columns:var(--table-columns);&:hover{background-color:", ";}&:hover ", "{display:block;}"], Color.ROW_HOVER, ElementHover);
 export const Th = styled(Td).withConfig({
   displayName: "Th",
   componentId: "sc-1vdjaze-4"
-})(["padding:8px 12px;color:#969ca3;font-weight:", ";font-size:", ";line-height:1;text-transform:uppercase;"], FontWeight.MEDIUM, FontSize.SMALL);
-export const ItemDetailLink = styled.a.withConfig({
-  displayName: "ItemDetailLink",
-  componentId: "sc-1vdjaze-5"
-})(["display:flex;align-items:center;text-decoration:none;font-weight:", ";color:", ";width:100%;&:hover{text-decoration:none;color:", ";}"], FontWeight.MEDIUM, Color.MAIN, Color.PRIMARY_HOVER);
+})(["padding:8px 12px;color:", ";font-weight:", ";font-size:", ";line-height:", ";text-transform:uppercase;"], Color.LOCKED, FontWeight.MEDIUM, FontSize.HEADING5, LineHeight.HEADING5);
 export const ItemName = styled.div.withConfig({
   displayName: "ItemName",
-  componentId: "sc-1vdjaze-6"
+  componentId: "sc-1vdjaze-5"
 })(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"]);
 const overflowStyles = css(["overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:", ";"], ({
   $maxLines
 }) => $maxLines);
 export const Description = styled.div.withConfig({
   displayName: "Description",
-  componentId: "sc-1vdjaze-7"
-})(["color:", ";font-size:", ";font-style:normal;font-weight:", ";line-height:130%;", ""], Color.LOCKED, FontSize.SMALL, FontWeight.REGULAR, ({
+  componentId: "sc-1vdjaze-6"
+})(["color:", ";font-size:", ";font-weight:", ";line-height:", ";", ""], Color.LOCKED, FontSize.SMALL, FontWeight.REGULAR, LineHeight.SMALL, ({
   $maxLines
 }) => $maxLines ? overflowStyles : undefined);
 export const LockedText = styled.div.withConfig({
   displayName: "LockedText",
-  componentId: "sc-1vdjaze-8"
+  componentId: "sc-1vdjaze-7"
 })(["color:", ";font-size:", ";font-weight:", ";max-width:", ";"], Color.LOCKED, ({
   $fontSize
 }) => $fontSize || FontSize.REGULAR, ({

package/package.json

@@ -48,5 +48,5 @@
     "react": "^16.14.0 || ^18.0.0",
     "react-dom": "^16.14.0 || ^18.0.0"
   },
-  "version": "1.1.8"
+  "version": "1.1.9"
 }