merge with master

xola · Apr 15, 2024 · d559ac6 · d559ac6
2 parents 08dee5b + 6d36e71
commit d559ac6
Show file tree

Hide file tree

Showing 14 changed files with 396 additions and 176 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@xola/ui-kit",
-    "version": "2.2.3",
+    "version": "2.3.2",
     "description": "Xola UI Kit",
     "license": "MIT",
     "repository": {
@@ -28,7 +28,7 @@
         "lint": "xola-lint src --ignore src/stories",
         "lint:fix": "xola-lint src --fix --ignore src/stories",
         "lint:report": "xola-lint src --ignore src/stories --reporter=json src > eslint_report.json",
-        "format": "prettier --write src",
+        "format": "prettier -l --write src",
         "test": "jest",
         "chromatic": "chromatic --exit-zero-on-changes --build-script-name build:storybook"
     },
@@ -48,6 +48,7 @@
         "react-hot-toast": "^2.1.0",
         "react-hotkeys-hook": "^3.4.0",
         "react-json-view": "^1.21.3",
+        "react-textarea-autosize": "^8.5.3",
         "react-select": "^5.7.0",
         "storybook-addon-designs": "^6.3.1",
         "tippy.js": "^6.3.1"

diff --git a/src/components/Breakdown.jsx b/src/components/Breakdown.jsx
@@ -1,7 +1,7 @@
-import clsx from "clsx";
 import PropTypes from "prop-types";
 import React, { createContext, useContext, useMemo } from "react";
 import { isNumber } from "lodash";
+import clsx from "clsx";
 import { Currency } from "./Utilities/Currency";
 
 const colors = {
@@ -35,17 +35,27 @@ Breakdown.propTypes = {
     locale: PropTypes.string,
 };
 
-const BreakdownItem = ({ children, info, methodIcon, secondary, value, className, color = "default", ...rest }) => {
-    /** When BreakdownItem is directly used without outer <Breakdown /> component, the context would be `undefined` */
+const BreakdownItem = ({
+    info,
+    methodIcon,
+    secondary,
+    value,
+    color = "default",
+    className,
+    classNames = { key: "", children: "", info: "", value: "" },
+    children,
+    ...rest
+}) => {
+    // When BreakdownItem is directly used without outer <Breakdown /> component, the context would be `undefined`
     const { currency, locale } = useContext(CurrencyContext) ?? {};
 
     return (
         <tr className={clsx("ui-breakdown-item", colors[color], className)} {...rest}>
-            <td colSpan={2} className="text-left leading-none">
+            <td colSpan={2} className={clsx("break-all text-left leading-none", classNames.key)}>
                 <div className="flex flex-wrap items-center leading-3.5">
                     <span className="break-word">
                         <span className="mr-0.5">{methodIcon}</span>
-                        {children}
+                        <span className={clsx("break-normal", classNames.children)}>{children}</span>
                     </span>
                     <span className="ml-1 text-sm">
                         {info && (
@@ -58,7 +68,7 @@ const BreakdownItem = ({ children, info, methodIcon, secondary, value, className
                 </div>
             </td>
 
-            <td className="w-[1%] whitespace-nowrap pl-4 text-right">
+            <td className={clsx("w-[1%] whitespace-nowrap pl-4 text-right", classNames.value)}>
                 {isNumber(value) ? (
                     <Currency shouldRemoveTrailingZeroes={false} currency={currency} locale={locale}>
                         {value}
@@ -78,21 +88,30 @@ BreakdownItem.propTypes = {
     secondary: PropTypes.node,
     value: PropTypes.node,
     className: PropTypes.string,
+    classNames: PropTypes.object,
     color: PropTypes.oneOf(Object.keys(colors)),
 };
 
 Breakdown.Item = BreakdownItem;
 Breakdown.Item.displayName = "Breakdown.Item";
 
-const BreakdownSubtotalItem = ({ children, info, value, className, color = "black", ...rest }) => {
+const BreakdownSubtotalItem = ({
+    info,
+    value,
+    color = "black",
+    className,
+    classNames = { children: "", info: "", value: "" },
+    children,
+    ...rest
+}) => {
     const { currency, locale } = useContext(CurrencyContext) ?? {};
 
     return (
         <tr className={clsx("ui-breakdown-subtotal-item", "font-bold", colors[color], className)} {...rest}>
-            <td className="pt-1 pb-4 text-left">{children}</td>
-            <td className="whitespace-nowrap pt-1 pb-4 text-right">{info}</td>
+            <td className={clsx("pt-1 pb-4 text-left", classNames.children)}>{children}</td>
+            <td className={clsx("whitespace-nowrap pt-1 pb-4 text-right", classNames.info)}>{info}</td>
 
-            <td className="w-[1%] whitespace-nowrap pt-1 pb-4 pl-4 text-right">
+            <td className={clsx("w-[1%] whitespace-nowrap pt-1 pb-4 pl-4 text-right", classNames.value)}>
                 <Currency shouldRemoveTrailingZeroes={false} currency={currency} locale={locale}>
                     {value}
                 </Currency>
@@ -106,6 +125,7 @@ BreakdownSubtotalItem.propTypes = {
     info: PropTypes.node,
     value: PropTypes.node,
     className: PropTypes.string,
+    classNames: PropTypes.object,
     color: PropTypes.oneOf(Object.keys(colors)),
 };
 

diff --git a/src/components/DatePicker/DatePicker.css b/src/components/DatePicker/DatePicker.css
@@ -167,8 +167,8 @@
     @apply !bg-blue !text-white;
 }
 
-/* Make the start date have a 50% light blue background towards the RIGHT side */
-.date-range-picker .DayPicker-Day--start:not(.DayPicker-Day--outside) {
+/* Make the start date have a 50% light blue background towards the RIGHT side when start and end is not same */
+.date-range-picker .DayPicker-Day--start:not(.DayPicker-Day--outside):not(.DayPicker-Day--end) {
     @apply rounded-none;
     background: linear-gradient(90deg, #ffffff 40%, #d1e1ff 25%);
 }
@@ -177,18 +177,23 @@
     @apply rounded-full;
 }
 
-/* Make the end date have a 50% light blue background towards the LEFT side */
-.date-range-picker .DayPicker-Day--end:not(.DayPicker-Day--outside) {
+/* Make the end date have a 50% light blue background towards the LEFT side when start and end is not same */
+.date-range-picker .DayPicker-Day--end:not(.DayPicker-Day--outside):not(.DayPicker-Day--start) {
     @apply rounded-none;
     background: linear-gradient(90deg, #d1e1ff 40%, #ffffff 25%); /* D1E1FF Blue lighter */
 }
 
+/* This is when start & end are the same. We shown an outline to indicate it is different */
+.date-range-picker .DayPicker-Day--start.DayPicker-Day--end:not(.DayPicker-Day--disabled) .ui-date-picker-day {
+    @apply outline outline-offset-1 outline-blue-lighter;
+}
+
 .date-range-picker .DayPicker-Day--end div {
     @apply rounded-full;
 }
 
 /**
- * These are stylings for the Date Picker, but only when they have custom content like prices or seller messaging
+ * These are styles for the Date Picker, but only when they have custom content like prices or seller messaging
  */
 .has-custom-content .DayPicker-Month {
     border-spacing: 1px 16px;