From e8bfbf42cf19214ee1756d352625b6538f85105a Mon Sep 17 00:00:00 2001
From: Johan Sosa <sosa.johan@gmail.com>
Date: Thu, 19 Sep 2024 14:01:40 +0200
Subject: [PATCH] feat(Inputs): Added `readOnly` to `InputWrapper` and make
 label `bold` in that case

---
 .../src/form/ColorInput/ColorInput.js         |  1 +
 .../src/form/DatePicker/DatePicker.js         |  1 +
 .../form/InputLabel/InputLabel.constants.js   |  2 +
 .../src/form/InputLabel/InputLabel.js         |  3 +-
 .../src/form/InputLabel/InputLabel.styles.js  |  3 +-
 .../InputWrapper/InputWrapper.constants.js    |  2 +
 .../src/form/InputWrapper/InputWrapper.js     |  2 +
 .../src/form/ListInput/ListInput.js           |  1 +
 .../src/form/NumberInput/NumberInput.js       |  1 +
 .../src/form/Select/Select.constants.js       |  1 +
 packages/components/src/form/Select/Select.js |  2 +-
 .../src/form/TextInput/TextInput.js           |  2 +-
 .../components/src/form/Textarea/Textarea.js  |  1 +
 .../src/form/TimeInput/TimeInput.js           |  2 +
 packages/components/src/tokens.compiled.js    | 41 +++++++++++++++----
 15 files changed, 54 insertions(+), 11 deletions(-)

diff --git a/packages/components/src/form/ColorInput/ColorInput.js b/packages/components/src/form/ColorInput/ColorInput.js
index 9af0b0db5..cf56aa961 100644
--- a/packages/components/src/form/ColorInput/ColorInput.js
+++ b/packages/components/src/form/ColorInput/ColorInput.js
@@ -163,6 +163,7 @@ const ColorInput = forwardRef(
         contentStyle={contentStyle}
         headerClassName={headerClassName}
         contentClassName={contentClassName}
+        readOnly={readOnly}
         {...props}
       >
         {readOnly ? (
diff --git a/packages/components/src/form/DatePicker/DatePicker.js b/packages/components/src/form/DatePicker/DatePicker.js
index 5f520e562..bfb97e43f 100644
--- a/packages/components/src/form/DatePicker/DatePicker.js
+++ b/packages/components/src/form/DatePicker/DatePicker.js
@@ -191,6 +191,7 @@ const DatePicker = forwardRef(
         headerStyle={headerStyle}
         contentStyle={contentStyle}
         style={style}
+        readOnly={readOnly}
       >
         {readOnly ? (
           <Paragraph clean>
diff --git a/packages/components/src/form/InputLabel/InputLabel.constants.js b/packages/components/src/form/InputLabel/InputLabel.constants.js
index 57b674f0d..2d275e4b2 100644
--- a/packages/components/src/form/InputLabel/InputLabel.constants.js
+++ b/packages/components/src/form/InputLabel/InputLabel.constants.js
@@ -6,6 +6,7 @@ export const INPUT_LABEL_DEFAULT_PROPS = {
   withDescriptionIcon: false,
   required: false,
   showEmptyLabel: false,
+  readOnly: false,
 };
 export const INPUT_LABEL_PROP_TYPES = {
   label: PropTypes.string,
@@ -13,4 +14,5 @@ export const INPUT_LABEL_PROP_TYPES = {
   withDescriptionIcon: PropTypes.bool,
   required: PropTypes.bool,
   showEmptyLabel: PropTypes.bool,
+  readOnly: PropTypes.bool,
 };
diff --git a/packages/components/src/form/InputLabel/InputLabel.js b/packages/components/src/form/InputLabel/InputLabel.js
index 3f2fe42e0..79ac6e559 100644
--- a/packages/components/src/form/InputLabel/InputLabel.js
+++ b/packages/components/src/form/InputLabel/InputLabel.js
@@ -12,9 +12,10 @@ const InputLabel = ({
   withDescriptionIcon,
   required,
   showEmptyLabel,
+  readOnly,
   ...props
 }) => {
-  const { classes } = InputLabelStyles({}, { name: 'InputLabel' });
+  const { classes } = InputLabelStyles({ readOnly }, { name: 'InputLabel' });
 
   return (
     <Box className={classes.container}>
diff --git a/packages/components/src/form/InputLabel/InputLabel.styles.js b/packages/components/src/form/InputLabel/InputLabel.styles.js
index 54235ae3f..29d22620e 100644
--- a/packages/components/src/form/InputLabel/InputLabel.styles.js
+++ b/packages/components/src/form/InputLabel/InputLabel.styles.js
@@ -1,6 +1,6 @@
 import { createStyles } from '@mantine/styles';
 
-const InputLabelStyles = createStyles((theme) => {
+const InputLabelStyles = createStyles((theme, { readOnly }) => {
   const labelTheme = theme.other.label;
 
   return {
@@ -12,6 +12,7 @@ const InputLabelStyles = createStyles((theme) => {
     label: {
       color: labelTheme.content.color.default,
       ...labelTheme.content.typo['02'],
+      fontWeight: readOnly ? 'bold' : 'normal',
     },
     required: {
       marginLeft: labelTheme.spacing.gap.sm,
diff --git a/packages/components/src/form/InputWrapper/InputWrapper.constants.js b/packages/components/src/form/InputWrapper/InputWrapper.constants.js
index afba554c8..0ecc47f85 100644
--- a/packages/components/src/form/InputWrapper/InputWrapper.constants.js
+++ b/packages/components/src/form/InputWrapper/InputWrapper.constants.js
@@ -22,6 +22,7 @@ export const INPUT_WRAPPER_PROP_TYPES = {
   contentStyle: PropTypes.any,
   autoComplete: PropTypes.string,
   showEmptyLabel: PropTypes.bool,
+  readOnly: PropTypes.bool,
 };
 export const INPUT_WRAPPER_DEFAULT_PROPS = {
   label: '',
@@ -33,4 +34,5 @@ export const INPUT_WRAPPER_DEFAULT_PROPS = {
   required: false,
   autoComplete: 'off',
   disabled: false,
+  readOnly: false,
 };
diff --git a/packages/components/src/form/InputWrapper/InputWrapper.js b/packages/components/src/form/InputWrapper/InputWrapper.js
index aeef2686c..b12497b2e 100644
--- a/packages/components/src/form/InputWrapper/InputWrapper.js
+++ b/packages/components/src/form/InputWrapper/InputWrapper.js
@@ -32,6 +32,7 @@ const InputWrapper = ({
   style,
   formValues,
   showEmptyLabel,
+  readOnly,
   ...props
 }) => {
   const size = INPUT_WRAPPER_SIZES.includes(sizeProp) ? sizeProp : 'md';
@@ -60,6 +61,7 @@ const InputWrapper = ({
             {...labelProps}
             description={description}
             withDescriptionIcon={withDescriptionIcon}
+            readOnly={readOnly}
           />
         </Stack>
       )}
diff --git a/packages/components/src/form/ListInput/ListInput.js b/packages/components/src/form/ListInput/ListInput.js
index bd66934e1..f5bd3cbba 100644
--- a/packages/components/src/form/ListInput/ListInput.js
+++ b/packages/components/src/form/ListInput/ListInput.js
@@ -149,6 +149,7 @@ const ListInput = ({
       size={size}
       error={error}
       required={required}
+      readOnly={readonly}
     >
       <Box>
         <SortableList
diff --git a/packages/components/src/form/NumberInput/NumberInput.js b/packages/components/src/form/NumberInput/NumberInput.js
index 5b6530ef3..65343d81a 100644
--- a/packages/components/src/form/NumberInput/NumberInput.js
+++ b/packages/components/src/form/NumberInput/NumberInput.js
@@ -80,6 +80,7 @@ const NumberInput = forwardRef(
         contentStyle={contentStyle}
         headerClassName={headerClassName}
         contentClassName={contentClassName}
+        readOnly={readOnly}
       >
         {readOnly ? (
           <Paragraph clean>{props.value || props.defaultValue || ''}</Paragraph>
diff --git a/packages/components/src/form/Select/Select.constants.js b/packages/components/src/form/Select/Select.constants.js
index 2f2bde4d0..a664edc8a 100644
--- a/packages/components/src/form/Select/Select.constants.js
+++ b/packages/components/src/form/Select/Select.constants.js
@@ -40,4 +40,5 @@ export const SELECT_PROP_TYPES = {
   autoComplete: PropTypes.string,
   readOnly: PropTypes.bool,
   autoSelectOneOption: PropTypes.bool,
+  withinPortal: PropTypes.bool,
 };
diff --git a/packages/components/src/form/Select/Select.js b/packages/components/src/form/Select/Select.js
index 2a1cfb905..735bd984d 100644
--- a/packages/components/src/form/Select/Select.js
+++ b/packages/components/src/form/Select/Select.js
@@ -144,7 +144,7 @@ const Select = forwardRef(
         {...props}
       ></MultiSelect>
     ) : (
-      <InputWrapper {...props} uuid={uuid} size={size} error={error}>
+      <InputWrapper {...props} readOnly={readOnly} uuid={uuid} size={size} error={error}>
         {readOnly ? (
           <Paragraph clean>{dataValue}</Paragraph>
         ) : (
diff --git a/packages/components/src/form/TextInput/TextInput.js b/packages/components/src/form/TextInput/TextInput.js
index 0f33040c0..6e51f8920 100644
--- a/packages/components/src/form/TextInput/TextInput.js
+++ b/packages/components/src/form/TextInput/TextInput.js
@@ -93,7 +93,7 @@ const TextInput = forwardRef(
     }, [variant]);
 
     return (
-      <InputWrapper {...props} uuid={uuid} size={size} error={error}>
+      <InputWrapper {...props} readOnly={readOnly} uuid={uuid} size={size} error={error}>
         {readOnly ? (
           <Paragraph clean>{value || defaultValue || ''}</Paragraph>
         ) : (
diff --git a/packages/components/src/form/Textarea/Textarea.js b/packages/components/src/form/Textarea/Textarea.js
index 30d65aabd..a454fc2ac 100644
--- a/packages/components/src/form/Textarea/Textarea.js
+++ b/packages/components/src/form/Textarea/Textarea.js
@@ -124,6 +124,7 @@ const Textarea = forwardRef(
     return (
       <InputWrapper
         {...props}
+        readOnly={readOnly}
         uuid={uuid}
         size={size}
         error={error}
diff --git a/packages/components/src/form/TimeInput/TimeInput.js b/packages/components/src/form/TimeInput/TimeInput.js
index bcd6d95f3..24060df6d 100644
--- a/packages/components/src/form/TimeInput/TimeInput.js
+++ b/packages/components/src/form/TimeInput/TimeInput.js
@@ -31,6 +31,7 @@ const TimeInput = forwardRef(
       contentStyle,
       autoComplete,
       style,
+      readOnly,
       ...props
     },
     ref,
@@ -52,6 +53,7 @@ const TimeInput = forwardRef(
         headerStyle={headerStyle}
         contentStyle={contentStyle}
         style={style}
+        readOnly={readOnly}
       >
         <MantineTimeInput
           {...props}
diff --git a/packages/components/src/tokens.compiled.js b/packages/components/src/tokens.compiled.js
index 8988d6ada..759838e77 100644
--- a/packages/components/src/tokens.compiled.js
+++ b/packages/components/src/tokens.compiled.js
@@ -1544,7 +1544,7 @@ export default {
           "y": 0,
           "blur": 4,
           "spread": 0,
-          "color": "#ffffff26",
+          "color": "#ffffff",
           "type": "dropShadow"
         },
         "type": "boxShadow"
@@ -1625,8 +1625,17 @@ export default {
             "type": "color"
           },
           "hover--reverse-transparent": {
-            "value": "#ffffff26",
-            "type": "color"
+            "value": "#ffffff",
+            "type": "color",
+            "$extensions": {
+              "studio.tokens": {
+                "modify": {
+                  "type": "alpha",
+                  "value": "0.15",
+                  "space": "lch"
+                }
+              }
+            }
           },
           "down": {
             "value": "#F1FFBD",
@@ -5286,12 +5295,30 @@ export default {
       "color": {
         "primary": {
           "default": {
-            "value": "#4d535866",
-            "type": "color"
+            "value": "#4D5358",
+            "type": "color",
+            "$extensions": {
+              "studio.tokens": {
+                "modify": {
+                  "type": "alpha",
+                  "value": "0.4",
+                  "space": "lch"
+                }
+              }
+            }
           },
           "hover": {
-            "value": "#4d5358b3",
-            "type": "color"
+            "value": "#4D5358",
+            "type": "color",
+            "$extensions": {
+              "studio.tokens": {
+                "modify": {
+                  "type": "alpha",
+                  "value": "0.7",
+                  "space": "lch"
+                }
+              }
+            }
           },
           "down": {
             "value": "#4D5358",