@trackunit/react-components 0.0.101 → 0.0.102

package/components/Chart/Chart.d.ts

@@ -61,8 +61,11 @@ export interface ChartProps extends CommonProps {
 }
 /**
  * The Chart component is a wrapper component for ECharts.
+ *
  * Handles events and click functionality.
  *
+ * For more information see the [eCharts documentation](https://github.com/hustcc/echarts-for-react).
+ *
  * @param {ChartProps} props - The props for the Chart component
  * @returns {JSX.Element} Chart component
  */

package/components/CopyableText/CopyableText.d.ts

@@ -13,7 +13,7 @@ export interface CopyableTextProps extends CommonProps {
     alternativeText?: string;
 }
 /**
- * The CopyableText component is used where the user should have easy access to copy some information.
+ * The CopyableText component is used where the user should have easy access to copy information.
  *
  * @param {CopyableTextProps} props - The props for the CopyableText component
  * @returns {JSX.Element} CopyableText component

package/components/Spacer/Spacer.d.ts

@@ -1,21 +1,20 @@
 /// <reference types="react" />
 import { CommonProps } from "../../common";
-interface SpacerProps extends CommonProps {
+export interface SpacerProps extends CommonProps {
     /**
      * The minimum height of the spacer. Defaults to 1px.
      * Possible values are "normal"(8px), and "large" (32px).
      */
-    minHeight?: string;
+    minHeight?: "normal" | "large";
     /**
      * The border of the spacer.
      */
     border?: boolean;
 }
 /**
- * The Spacer component is used for adding a bit of space.
+ * The Spacer component is used for adding a bit of space in the ui.
  *
  * @param {SpacerProps} props - The props for the Spacer component
  * @returns {JSX.Element} Spacer component
  */
 export declare const Spacer: ({ minHeight, border, dataTestId }: SpacerProps) => JSX.Element;
-export {};

package/components/Tag/Tag.d.ts

@@ -25,11 +25,13 @@ export interface TagProps extends CommonProps {
     size?: TagSize;
 }
 /**
- * Tags allow users to enter information and filter content.
+ *  The tag component is used to categorize elements in the ui.
  *
- * Multiple or single tags can be used to categorise items.
+ *  This could be to tell the state of an asset, or label a page as Beta.
  *
- * Use short labels for easy scanning. Use two words only if necessary to describe the status and differentiate it from other tags.
+ *  The tag is also used in multiselect components to show selected options.
+ *
+ *  **Do:** Use short labels for easy scanning.
  *
  * @param {TagProps} props - The props for the tag component
  * @returns {JSX.Element} tag component

package/components/Text/Text.d.ts

@@ -47,7 +47,11 @@ export interface TextProps extends CommonProps {
     underline?: boolean;
 }
 /**
- * The Text component.
+ *  The Text component is used to apply Trackunit default typography styles to text.
+ *
+ *  ### When to use
+ *
+ *  Use Text when you want to show a text section, use Heading if you want to show a heading.
  *
  * @param {TextProps} props - The props for the Text component
  * @returns {JSX.Element} Text component

package/index.js

@@ -494,7 +494,11 @@ const CustomIcon = tw(Icon$1)`
 `;
 
 /**
- * The Text component.
+ *  The Text component is used to apply Trackunit default typography styles to text.
+ *
+ *  ### When to use
+ *
+ *  Use Text when you want to show a text section, use Heading if you want to show a heading.
  *
  * @param {TextProps} props - The props for the Text component
  * @returns {JSX.Element} Text component
@@ -796,7 +800,7 @@ const IconContainer$1 = tw.div`
 
 const Badge = _a => {
   var {
-    color = "neutral",
+    color = "danger",
     subtle = false,
     className,
     count,
@@ -1288,8 +1292,11 @@ const HeadingContainer = tw.div`
 
 /**
  * The Chart component is a wrapper component for ECharts.
+ *
  * Handles events and click functionality.
  *
+ * For more information see the [eCharts documentation](https://github.com/hustcc/echarts-for-react).
+ *
  * @param {ChartProps} props - The props for the Chart component
  * @returns {JSX.Element} Chart component
  */
@@ -1686,7 +1693,7 @@ const StyledCollapsible = tw.div`
 `;
 
 /**
- * The CopyableText component is used where the user should have easy access to copy some information.
+ * The CopyableText component is used where the user should have easy access to copy information.
  *
  * @param {CopyableTextProps} props - The props for the CopyableText component
  * @returns {JSX.Element} CopyableText component
@@ -1719,19 +1726,8 @@ const CopyableText = ({
   }));
 };
 const StyledCopyableText = tw.span`
-  py-1
-  px-2
-  border
-  border-dashed
-  border-neutral-600
-  rounded
-  cursor-pointer
-  inline
-  transition-all
-  ease-in-out
-  leading-7
-  break-words
-  ${p => p.$animating ? tws`animate-copy` : null}`;
+  tu-copyable-text
+  ${p => p.$animating ? tws`tu-copyable-text--animating` : null}`;
 
 const localeLookup = {
   en: enGB,
@@ -3097,34 +3093,15 @@ const NumberField = forwardRef((_a, ref) => {
   }));
 });
 
-const GetSpacerHeight = () => ({
-  minHeight
-}) => {
-  if (!minHeight) {
-    return "";
-  }
-
-  switch (minHeight) {
-    case "normal":
-      return tws`min-h-[8px]`;
-
-    case "large":
-      return tws`min-h-[32px]`;
-
-    default:
-      return "";
-  }
-};
 /**
- * The Spacer component is used for adding a bit of space.
+ * The Spacer component is used for adding a bit of space in the ui.
  *
  * @param {SpacerProps} props - The props for the Spacer component
  * @returns {JSX.Element} Spacer component
  */
 
-
 const Spacer = ({
-  minHeight = "",
+  minHeight,
   border,
   dataTestId
 }) => {
@@ -3134,17 +3111,35 @@ const Spacer = ({
     border: border
   });
 };
+
+const GetSpacerHeight = () => ({
+  minHeight
+}) => {
+  switch (minHeight) {
+    case "normal":
+      return tws`tu-spacer--normal`;
+
+    case "large":
+      return tws`tu-spacer--large`;
+
+    default:
+      return "";
+  }
+};
+
 const Space = tw.div`
-${p => `${p.border ? `tu-spacer--border` : null}`}
-${GetSpacerHeight()}
+  ${p => `${p.border ? `tu-spacer--border` : null}`}
+  ${GetSpacerHeight()}
 `;
 
 /**
- * Tags allow users to enter information and filter content.
+ *  The tag component is used to categorize elements in the ui.
+ *
+ *  This could be to tell the state of an asset, or label a page as Beta.
  *
- * Multiple or single tags can be used to categorise items.
+ *  The tag is also used in multiselect components to show selected options.
  *
- * Use short labels for easy scanning. Use two words only if necessary to describe the status and differentiate it from other tags.
+ *  **Do:** Use short labels for easy scanning.
  *
  * @param {TagProps} props - The props for the tag component
  * @returns {JSX.Element} tag component
@@ -3773,12 +3768,12 @@ const SkeletonLines = memo(({
   for (let i = 0; i < lines; i++) {
     skeletonLines.push(jsx(SkeletonLine, Object.assign({
       "data-testid": dataTestId,
-      margin: margin,
       "data-type": "loading-skeleton-line",
       className: className,
       style: {
         height: getHeight(i),
-        width: getWidth(i)
+        width: getWidth(i),
+        margin: margin
       }
     }, {
       children: "\u00A0"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.0.101",
+  "version": "0.0.102",
   "repository": "https://github.com/Trackunit/manager",
   "license": "UNLICENSED",
   "dependencies": {