@trackunit/react-components 0.0.115 → 0.0.118

package/components/Card/Card.d.ts

@@ -35,8 +35,8 @@ export interface CardProps extends CommonProps {
     onMouseLeave?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
 }
 /**
- * The Card component is a container for ui elements, and is the main component of the modal.
- * To get the most out of the Card use it in combination with the CardHeader, CardBody and CardFooter.
+ * The Card component is a container for UI elements, and is the main component of the modal.
+ * To get the most out of the Card, use it in combination with the CardHeader, CardBody and CardFooter.
  *
  * @param {CardProps} props - The props for the Card component
  * @returns {JSX.Element} Card component

package/components/Icon/Icon.d.ts

@@ -41,7 +41,9 @@ export interface IconProps extends CommonProps {
     style?: Record<string, string>;
 }
 /**
- * The Icon component is ued to display an Icon.
+ * - The Icon component is used to display an Icon.
+ * - Icons are semantic vector graphics that adds character and improves the visual appeal of elements when combined with.
+ * - All the [HeroIcons](https://heroicons.dev/) as well as custom TrackUnit icons are available.
  *
  * @param {IconProps} props - The props for the Icon component
  * @returns {JSX.Element} Icon component

package/components/TextAreaField/TextAreaField.d.ts

@@ -2,6 +2,7 @@ import * as React from "react";
 import { CommonProps } from "../../common";
 import { FormGroupProps } from "../FormGroup/FormGroup";
 import { TextAreaProps } from "../TextArea/TextArea";
+import "../TextArea/TextArea.css";
 declare type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon">;
 export interface TextAreaFieldProps extends TextAreaProps, FormGroupExposedProps, CommonProps {
     /**

package/index.css

@@ -163,6 +163,31 @@
   }
 }
 
+.tu-textarea {
+  @apply tu-input-base 
+    block
+    overflow-auto
+    appearance-none
+    px-3
+    py-2
+    bg-transparent
+    text-base
+    text-slate-900
+    placeholder-slate-400
+    focus-visible:outline-none
+    w-full 
+    h-20
+    transition;
+
+  &--invalid {
+    @apply tu-input--invalid;
+  }
+
+  &--disabled {
+    @apply tu-input--disabled;
+  }
+}
+
 /* CSS related to the toggle component */
 .tu-toggle {
   @apply rounded-full

package/index.js

@@ -341,7 +341,9 @@ const IconSizeClassMap = {
 
 };
 /**
- * The Icon component is ued to display an Icon.
+ * - The Icon component is used to display an Icon.
+ * - Icons are semantic vector graphics that adds character and improves the visual appeal of elements when combined with.
+ * - All the [HeroIcons](https://heroicons.dev/) as well as custom TrackUnit icons are available.
  *
  * @param {IconProps} props - The props for the Icon component
  * @returns {JSX.Element} Icon component
@@ -681,7 +683,7 @@ const Alert = ({
   });
   React.useEffect(() => {
     if (autoScroll) {
-      ref && ref.current && ref.current.scrollIntoView();
+      ref && ref.current && ref.current.scrollIntoView && ref.current.scrollIntoView();
     }
   }, [ref, autoScroll]);
   return jsxs(Container$7, Object.assign({
@@ -958,8 +960,8 @@ const InputContainer = tw.div`
 
 const ROLE_CARD = "region";
 /**
- * The Card component is a container for ui elements, and is the main component of the modal.
- * To get the most out of the Card use it in combination with the CardHeader, CardBody and CardFooter.
+ * The Card component is a container for UI elements, and is the main component of the modal.
+ * To get the most out of the Card, use it in combination with the CardHeader, CardBody and CardFooter.
  *
  * @param {CardProps} props - The props for the Card component
  * @returns {JSX.Element} Card component

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.0.115",
+  "version": "0.0.118",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "dependencies": {