Merge branch 'v2' into v2-develop

.github/workflows/release.yaml

@@ -108,7 +108,7 @@ jobs:
         target: ['alpha', 'v2-develop']
     steps:
       - name: Call create sync pr
-        uses: gisce/[email protected].9
+        uses: gisce/[email protected].25
         with:
           repository: ${{ env.LIBRARY_NAME }}
           targetBranch: ${{ matrix.target }}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gisce/react-ooui",
-  "version": "2.54.0-rc.1",
+  "version": "2.55.0",
   "engines": {
     "node": "20.5.0"
   },

src/helpers/dayjs.ts

@@ -8,6 +8,9 @@ import duration from "dayjs/plugin/duration";
 import relativeTime from "dayjs/plugin/relativeTime";
 import weekday from "dayjs/plugin/weekday";
 import localeData from "dayjs/plugin/localeData";
+import "dayjs/locale/es";
+import "dayjs/locale/en";
+import "dayjs/locale/ca";
 
 dayjs.extend(advancedFormat);
 dayjs.extend(customParseFormat);

src/widgets/base/Label.tsx

@@ -1,10 +1,11 @@
-import React, { useContext } from "react";
+import { useContext } from "react";
 import { Tooltip, Typography, theme } from "antd";
 import { WidgetProps } from "@/types";
 import { QuestionCircleOutlined } from "@ant-design/icons";
 import { Label as LabelOoui } from "@gisce/ooui";
 import { FormContext, FormContextType } from "@/context/FormContext";
 import { Interweave } from "interweave";
+import dayjs from "@/helpers/dayjs";
 const { Text, Title } = Typography;
 const { useToken } = theme;
 
@@ -28,6 +29,13 @@ const Label = (props: Props) => {
   let labelText = addColon && label.length > 1 ? label + " :" : label;
   if (!ooui.fieldForLabel && ooui._id) {
     labelText = formContext.getFieldValue(ooui._id);
+    if (
+      ooui.fieldType === "date" ||
+      ooui.fieldType === "time" ||
+      ooui.fieldType === "datetime"
+    ) {
+      labelText = labelText ? dayjs(labelText).fromNow() : "";
+    }
   }
   const responsiveAlign = responsiveBehaviour ? "left" : "right";
   const labelAlgin = align || (fieldForLabel ? responsiveAlign : "left");

src/widgets/custom/ArrowSteps.tsx

@@ -38,8 +38,8 @@ export const ArrowSteps = (props: ArrowStepsProps) => {
   const stepStyle = (isActive: boolean): React.CSSProperties => ({
     position: "relative",
     padding: "10px 30px 10px 40px",
-    backgroundColor: isActive ? colorPrimaryBg : colorFillSecondary,
-    color: isActive ? colorPrimaryText : colorText,
+    backgroundColor: isActive ? colorPrimaryText : colorFillSecondary,
+    color: isActive ? colorPrimaryBg : colorText,
     borderTop: `1px solid ${colorBgContainer}`,
     borderBottom: `1px solid ${colorBgContainer}`,
     width: "32%",
@@ -65,7 +65,9 @@ export const ArrowSteps = (props: ArrowStepsProps) => {
     top: 0,
     left: "100%",
     zIndex: 20,
-    borderLeft: `16px solid ${isActive ? colorPrimaryBg : colorFillSecondary}`,
+    borderLeft: `16px solid ${
+      isActive ? colorPrimaryText : colorFillSecondary
+    }`,
     borderTop: "16px solid transparent",
     borderBottom: "16px solid transparent",
   });