@luscii-healthtech/web-ui 0.5.2 → 0.6.2

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.5.2",
+  "version": "0.6.2",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -24,7 +24,8 @@
     "build-tailwind": "NODE_ENV=production yarn run tailwindcss build tailwind.css -o ./dist/web-ui-tailwind.css"
   },
   "peerDependencies": {
-    "react": ">=16"
+    "react": ">=16",
+    "react-tooltip": "^4.2.21"
   },
   "husky": {
     "hooks": {
@@ -82,6 +83,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
+    "react-tooltip": "^4.2.21",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-scss": "^3.0.0",
     "rollup-plugin-svg": "^2.0.0",

package/src/components/ButtonV2/ButtonProps.type.ts

@@ -1,8 +1,12 @@
 import { IconProps } from "../Icons/types/IconProps.type";
+import { TextColor, TextHoverColor } from "../Text/Text";
 
-export interface BaseButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
+export interface BaseButtonProps
+  extends React.HTMLAttributes<HTMLButtonElement> {
   onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
   text?: string;
+  textColor?: TextColor;
+  textHoverColor?: TextHoverColor;
   icon?: React.FunctionComponent<IconProps>;
   isDisabled?: boolean;
   className?: string;

package/src/components/ButtonV2/ButtonV2.tsx

@@ -2,12 +2,15 @@ import classNames from "classnames";
 import React from "react";
 
 import { Spinner } from "../Spinner/Spinner";
+import Text from "../Text/Text";
 
 import { ButtonProps } from "./ButtonProps.type";
 
 export const ButtonV2 = ({
   onClick,
   text,
+  textColor,
+  textHoverColor,
   icon,
   isDisabled,
   isPending,
@@ -32,6 +35,7 @@ export const ButtonV2 = ({
       "shadow-sm",
       "cursor-pointer",
       "focus:outline-primary",
+      "group",
     ],
     {
       "w-11": !text && icon,
@@ -72,14 +76,16 @@ export const ButtonV2 = ({
       )}
 
       {text && (
-        <span
-          className={classNames("text-sm font-medium", {
+        <Text
+          className={classNames({
             invisible: isPending,
             "ml-1": icon,
           })}
-        >
-          {text}
-        </span>
+          text={text}
+          color={textColor}
+          hoverColor={textHoverColor}
+          hoverInGroup
+        />
       )}
     </button>
   );

package/src/components/ButtonV2/PrimaryButton.tsx

@@ -17,6 +17,7 @@ export const PrimaryButton = (props: ButtonProps): JSX.Element => {
         ],
         props.className
       )}
+      textColor="white"
     />
   );
 };

package/src/components/ButtonV2/SecondaryButton.tsx

@@ -19,6 +19,8 @@ export const SecondaryButton = (props: BaseButtonProps): JSX.Element => {
         ],
         props.className
       )}
+      textColor="blue-800"
+      textHoverColor="blue-900"
     />
   );
 };

package/src/components/ButtonV2/TertiaryButton.tsx

@@ -19,6 +19,8 @@ export const TertiaryButton = (props: BaseButtonProps): JSX.Element => {
         ],
         props.className
       )}
+      textColor="blue-800"
+      textHoverColor="blue-900"
     />
   );
 };

package/src/components/List/List.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import classNames from "classnames";
+
+import { ListItem, ListItemProps } from "./ListItem";
+
+export interface ListProps {
+  items: ListItemProps[];
+}
+
+export const List = ({ items }: ListProps): JSX.Element => {
+  return (
+    <ul className={classNames("list-none")}>
+      {items.map(item => (
+        <ListItem {...item} key={item.itemId} />
+      ))}
+    </ul>
+  );
+};
+
+export default List;

package/src/components/List/ListItem.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import classNames from "classnames";
+
+import { IconProps } from "../Icons/types/IconProps.type";
+import Text from "../Text/Text";
+
+export interface ListItemProps {
+  itemId: string | number;
+  title: string;
+  subTitle?: string;
+  icon?: React.FunctionComponent<IconProps> | null;
+  accessories?: JSX.Element[];
+  handleItemClick?: () => void;
+  tooltipId?: string;
+}
+
+export const ListItem = ({
+  icon,
+  subTitle,
+  title,
+  accessories,
+  tooltipId,
+  ...restProps
+}: ListItemProps): JSX.Element => (
+  <li
+    className={classNames(
+      "flex flex-row items-center space-x-4",
+      "p-4 border-b last:border-b-0 border-slate-200",
+      { "cursor-pointer": restProps.handleItemClick }
+    )}
+    onClick={restProps.handleItemClick}
+    data-tip={restProps.itemId}
+    data-for={tooltipId}
+  >
+    {icon && React.createElement(icon, { className: "w-6 h-6" })}
+    <div className={classNames({ "pl-10": icon === null })}>
+      <Text text={title} />
+      {subTitle && <Text text={subTitle} type={"sm"} />}
+    </div>
+    <div className={"flex-grow"} />
+    {accessories}
+  </li>
+);
+
+export default ListItem;

package/src/components/Table/Table.tsx

@@ -51,19 +51,20 @@ export function Table<Item>({
       )}
       {...otherAttributes}
     >
-      {showHeader && (
+      {showHeader ? (
         <TableHeader
           className="border-b border-slate-100"
           fieldConfigurations={fieldConfigurations}
         />
-      )}
+      ) : null}
 
       <TableBody
         className={classNames({
           "border-b border-slate-100":
             !showEmptyView &&
             paginationMenuProps &&
-            paginationMenuProps.pageCount > 1,
+            paginationMenuProps.currentPageNumber > 0 &&
+            paginationMenuProps.pageCount > 0,
         })}
         items={items}
         fieldConfigurations={fieldConfigurations}
@@ -75,13 +76,14 @@ export function Table<Item>({
       />
 
       {!showEmptyView &&
-        paginationMenuProps &&
-        paginationMenuProps.pageCount > 1 && (
-          <TableFooter
-            colSpan={fieldConfigurations.length}
-            paginationMenuProps={paginationMenuProps}
-          />
-        )}
+      paginationMenuProps &&
+      paginationMenuProps.currentPageNumber > 0 &&
+      paginationMenuProps.pageCount > 0 ? (
+        <TableFooter
+          colSpan={fieldConfigurations.length}
+          paginationMenuProps={paginationMenuProps}
+        />
+      ) : null}
     </table>
   );
 }

package/src/index.tsx

@@ -35,6 +35,7 @@ export {
   LoadingIndicatorProps,
 } from "./components/LoadingIndicator/LoadingIndicator";
 export { default as Menu } from "./components/Menu/Menu";
+export { List } from "./components/List/List";
 export { MultiSelect } from "./components/MultiSelect/MultiSelect";
 export { NavLayout, NavMenuLayoutProps } from "./components/NavMenu/NavLayout";
 export { NavMenu, NavMenuElement } from "./components/NavMenu/NavMenu";