@trackunit/react-components 0.1.97 → 0.1.100

package/index.cjs

@@ -1753,11 +1753,18 @@ const Space = tailwindStyledComponents.tw.div `
  * @param {SectionHeaderProps} props - The props for the section header component
  * @returns {JSX.Element} SectionHeader component
  */
-const SectionHeader = ({ title, subtitle, dataTestId, addon }) => {
-    return (jsxRuntime.jsxs(SectionHeaderContainer, { children: [jsxRuntime.jsx(reactHelmetAsync.HelmetProvider, { children: jsxRuntime.jsx(reactHelmetAsync.Helmet, { title: title }) }), jsxRuntime.jsxs(StyledFlex, { children: [jsxRuntime.jsx(Heading$1, Object.assign({ variant: "secondary", dataTestId: dataTestId }, { children: title })), addon] }), subtitle && (jsxRuntime.jsx(Heading$1, Object.assign({ variant: "subtitle", subtle: true }, { children: subtitle }))), jsxRuntime.jsx(Spacer, { minHeight: "normal" })] }));
+const SectionHeader = ({ title, subtitle, dataTestId, addons }) => {
+    return (jsxRuntime.jsxs(SectionHeaderContainer, { children: [jsxRuntime.jsx(reactHelmetAsync.HelmetProvider, { children: jsxRuntime.jsx(reactHelmetAsync.Helmet, { title: title }) }), jsxRuntime.jsxs(StyledFlex, Object.assign({ className: "flex-row mb-2" }, { children: [jsxRuntime.jsxs(StyledFlex, Object.assign({ className: "flex-col grow" }, { children: [jsxRuntime.jsx(Heading$1, Object.assign({ variant: "secondary", dataTestId: dataTestId }, { children: title })), subtitle && (jsxRuntime.jsx(Heading$1, Object.assign({ variant: "subtitle", subtle: true }, { children: subtitle })))] })), addons && jsxRuntime.jsx(StyledFlex, { children: addons })] })), jsxRuntime.jsx(Spacer, { minHeight: "normal" })] }));
 };
-const SectionHeaderContainer = tailwindStyledComponents.tw.div `tu-section-header`;
-const StyledFlex = tailwindStyledComponents.tw.div `tu-section-header__flex`;
+const SectionHeaderContainer = tailwindStyledComponents.tw.div `
+  tu-section-header
+  flex
+  flex-col
+`;
+const StyledFlex = tailwindStyledComponents.tw.div `
+  flex
+  gap-2
+`;
 
 /**
  * A hook used to detect what children are overflowing a container.

package/index.css

@@ -192,14 +192,3 @@
       hover:bg-transparent;
   }
 }
-
-.tu-section-header {
-  @apply w-full;
-
-  &__flex {
-    @apply flex
-      items-center
-      flex-wrap-reverse
-      gap-2;
-  }
-}

package/index.js

@@ -1726,11 +1726,18 @@ const Space = tw.div `
  * @param {SectionHeaderProps} props - The props for the section header component
  * @returns {JSX.Element} SectionHeader component
  */
-const SectionHeader = ({ title, subtitle, dataTestId, addon }) => {
-    return (jsxs(SectionHeaderContainer, { children: [jsx(HelmetProvider, { children: jsx(Helmet, { title: title }) }), jsxs(StyledFlex, { children: [jsx(Heading$1, Object.assign({ variant: "secondary", dataTestId: dataTestId }, { children: title })), addon] }), subtitle && (jsx(Heading$1, Object.assign({ variant: "subtitle", subtle: true }, { children: subtitle }))), jsx(Spacer, { minHeight: "normal" })] }));
+const SectionHeader = ({ title, subtitle, dataTestId, addons }) => {
+    return (jsxs(SectionHeaderContainer, { children: [jsx(HelmetProvider, { children: jsx(Helmet, { title: title }) }), jsxs(StyledFlex, Object.assign({ className: "flex-row mb-2" }, { children: [jsxs(StyledFlex, Object.assign({ className: "flex-col grow" }, { children: [jsx(Heading$1, Object.assign({ variant: "secondary", dataTestId: dataTestId }, { children: title })), subtitle && (jsx(Heading$1, Object.assign({ variant: "subtitle", subtle: true }, { children: subtitle })))] })), addons && jsx(StyledFlex, { children: addons })] })), jsx(Spacer, { minHeight: "normal" })] }));
 };
-const SectionHeaderContainer = tw.div `tu-section-header`;
-const StyledFlex = tw.div `tu-section-header__flex`;
+const SectionHeaderContainer = tw.div `
+  tu-section-header
+  flex
+  flex-col
+`;
+const StyledFlex = tw.div `
+  flex
+  gap-2
+`;
 
 /**
  * A hook used to detect what children are overflowing a container.

package/package.json

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

package/src/components/SectionHeader/SectionHeader.d.ts

@@ -1,6 +1,5 @@
 import { ReactNode } from "react";
 import { CommonProps } from "../../common/CommonProps";
-import "./SectionHeader.css";
 export interface SectionHeaderProps extends CommonProps {
     /**
      * The title of the section.
@@ -13,7 +12,7 @@ export interface SectionHeaderProps extends CommonProps {
     /**
      * The addon could be used to tell the state of a section header.
      */
-    addon?: ReactNode;
+    addons?: ReactNode;
 }
 /**
  * The SectionHeader component is used on sections to set the section title.
@@ -21,4 +20,4 @@ export interface SectionHeaderProps extends CommonProps {
  * @param {SectionHeaderProps} props - The props for the section header component
  * @returns {JSX.Element} SectionHeader component
  */
-export declare const SectionHeader: ({ title, subtitle, dataTestId, addon }: SectionHeaderProps) => JSX.Element;
+export declare const SectionHeader: ({ title, subtitle, dataTestId, addons }: SectionHeaderProps) => JSX.Element;

package/src/components/buttons/BackToTopButton/BackToTopButton.d.ts

@@ -0,0 +1,14 @@
+import { CommonProps, Size } from "../../../common";
+export type BackToTopColor = "primary" | "secondary";
+export interface StyledBackToTopProps {
+    $color?: BackToTopColor;
+}
+export interface BackToTopProps extends CommonProps {
+    color?: BackToTopColor;
+    size?: Size;
+}
+/**
+ * BackToTopButton appears at the bottom-right corner of the screen when the user scrolls down the page. When clicked, the page scrolls smoothly to the top.
+ *
+ */
+export declare const BackToTopButton: ({ color, size, dataTestId }: BackToTopProps) => JSX.Element;