feat(localized-money-input): add support for isCondensed prop on Loca… (

#2798) * feat(localized-money-input): add support for isCondensed prop on LocalizedMoneyInput component * feat(localized-money-input): add spec for new isCondensed prop --------- Co-authored-by: Carlos Cortizas <[email protected]>
commercetools · Apr 29, 2024 · 0798b97 · 0798b97
1 parent d72e043
commit 0798b97
Show file tree

Hide file tree

Showing 8 changed files with 51 additions and 1 deletion.
diff --git a/.changeset/six-timers-promise.md b/.changeset/six-timers-promise.md
@@ -0,0 +1,6 @@
+---
+'@commercetools-uikit/localized-money-input': minor
+'@commercetools-uikit/money-input': minor
+---
+
+Add support for isCondensed property on LocalizedMoneyInput component
diff --git a/packages/components/inputs/localized-money-input/README.md b/packages/components/inputs/localized-money-input/README.md
@@ -62,6 +62,7 @@ export default Example;
 | `onFocus`                       | `Function`<br/>[See signature.](#signature-onFocus)                                                   |          |           | Called when input is focused                                                                                                                                                                                                                                                     |
 | `hideCurrencyExpansionControls` | `boolean`                                                                                             |          |           | Will hide the currency expansion controls when set to `true`. All currencies will be shown when set to `true`.                                                                                                                                                                   |
 | `defaultExpandCurrencies`       | `boolean`                                                                                             |          |           | Controls whether one or all currencirs are visible by default                                                                                                                                                                                                                    |
+| `isCondensed`                   | `boolean`                                                                                             |          |           | Use this property to reduce the paddings of the component for a ui compact variant                                                                                                                                                                                               |
 | `isDisabled`                    | `boolean`                                                                                             |          |           | Indicates that the input cannot be modified (e.g not authorized, or changes currently saving).                                                                                                                                                                                   |
 | `isReadOnly`                    | `boolean`                                                                                             |          |           | Indicates that the field is displaying read-only content                                                                                                                                                                                                                         |
 | `placeholder`                   | `Record`                                                                                              |          |           | Placeholder text for the input                                                                                                                                                                                                                                                   |

diff --git a/packages/components/inputs/localized-money-input/src/localized-money-input.story.js b/packages/components/inputs/localized-money-input/src/localized-money-input.story.js
@@ -71,6 +71,7 @@ storiesOf('Components|Inputs', module)
                 // warnings in case hideCurrencyExpansionControls is true
                 defaultExpandCurrencies || undefined
               }
+              isCondensed={boolean('isCondensed', false)}
               isDisabled={boolean('isDisabled', false)}
               isReadOnly={boolean('isReadOnly', false)}
               placeholder={object('placeholder', { EUR: '', USD: '' })}

diff --git a/packages/components/inputs/localized-money-input/src/localized-money-input.tsx b/packages/components/inputs/localized-money-input/src/localized-money-input.tsx
@@ -76,6 +76,10 @@ export type TLocalizedMoneyInputProps = {
    * Controls whether one or all currencirs are visible by default
    */
   defaultExpandCurrencies?: boolean;
+  /**
+   * Use this property to reduce the paddings of the component for a ui compact variant
+   */
+  isCondensed?: boolean;
   /**
    * Indicates that the input cannot be modified (e.g not authorized, or changes currently saving).
    */
@@ -161,6 +165,10 @@ type TLocalizedInputProps = {
    * Called when input is focused
    */
   onFocus?: (event: TCustomEvent) => void;
+  /**
+   * Use this property to reduce the paddings of the component for a ui compact variant
+   */
+  isCondensed?: boolean;
   /**
    * Indicates that the input cannot be modified (e.g not authorized, or changes currently saving).
    */
@@ -246,6 +254,7 @@ const LocalizedInput = (props: TLocalizedInputProps) => {
           value={props.value}
           onChange={handleChange}
           onBlur={props.onBlur}
+          isCondensed={props.isCondensed}
           isDisabled={props.isDisabled}
           isReadOnly={props.isReadOnly}
           placeholder={props.placeholder}
@@ -335,6 +344,7 @@ const LocalizedMoneyInput = (props: TLocalizedMoneyInputProps) => {
                 }
                 onBlur={props.onBlur}
                 onFocus={props.onFocus}
+                isCondensed={props.isCondensed}
                 isDisabled={props.isDisabled}
                 isReadOnly={props.isReadOnly}
                 hasError={Boolean(

diff --git a/packages/components/inputs/localized-money-input/src/localized-money-input.visualroute.jsx b/packages/components/inputs/localized-money-input/src/localized-money-input.visualroute.jsx
@@ -91,6 +91,25 @@ export const component = () => (
         isReadOnly={true}
       />
     </Spec>
+    <Spec label="when condensed and open">
+      <LocalizedMoneyInput
+        value={value}
+        onChange={() => {}}
+        selectedCurrency="CAD"
+        horizontalConstraint={7}
+        isCondensed={true}
+        defaultExpandCurrencies={true}
+      />
+    </Spec>
+    <Spec label="when condensed and closed">
+      <LocalizedMoneyInput
+        value={value}
+        onChange={() => {}}
+        selectedCurrency="CAD"
+        horizontalConstraint={7}
+        isCondensed={true}
+      />
+    </Spec>
     <Spec label="when there is an error for a specific currency (first one)">
       <LocalizedMoneyInput
         value={value}

diff --git a/packages/components/inputs/money-input/README.md b/packages/components/inputs/money-input/README.md
@@ -61,6 +61,7 @@ export default Example;
 | `placeholder`           | `string`                                                                                              |          |           | Placeholder text for the input                                                                                                                                |
 | `onBlur`                | `Function`<br/>[See signature.](#signature-onBlur)                                                    |          |           | Called when input is blurred                                                                                                                                  |
 | `onFocus`               | `Function`<br/>[See signature.](#signature-onFocus)                                                   |          |           | Called when input is focused                                                                                                                                  |
+| `isCondensed`           | `boolean`                                                                                             |          |           | Use this property to reduce the paddings of the component for a ui compact variant                                                                            |
 | `isDisabled`            | `boolean`                                                                                             |          |           | Indicates that the input cannot be modified (e.g not authorized, or changes currently saving).                                                                |
 | `isReadOnly`            | `boolean`                                                                                             |          |           | Indicates that the field is displaying read-only content                                                                                                      |
 | `isAutofocussed`        | `boolean`                                                                                             |          |           | Focus the input on initial render                                                                                                                             |

diff --git a/packages/components/inputs/money-input/src/money-input.styles.ts b/packages/components/inputs/money-input/src/money-input.styles.ts
@@ -27,7 +27,9 @@ const getCurrencyLabelStyles = (props: TInputProps) => css`
   border-right: 0;
   padding: 0 ${designTokens.spacing25};
   align-items: center;
-  font-size: ${designTokens.fontSize30};
+  font-size: ${props.isCondensed
+    ? designTokens.fontSize20
+    : designTokens.fontSize30};
   box-sizing: border-box;
 
   &:focus-within: {

diff --git a/packages/components/inputs/money-input/src/money-input.tsx b/packages/components/inputs/money-input/src/money-input.tsx
@@ -46,6 +46,7 @@ const getPortalNode = (id?: string) =>
 type TLabel = {
   id: string;
   children?: ReactNode;
+  isCondensed?: boolean;
   isDisabled?: boolean;
   isReadOnly?: boolean;
 };
@@ -86,6 +87,7 @@ type TCreateCurrencySelectStyles = (
 ) => void;
 
 export type TInputProps = {
+  isCondensed?: boolean;
   isDisabled?: boolean;
   hasError?: boolean;
   hasWarning?: boolean;
@@ -103,6 +105,7 @@ type TBase = {
 const createCurrencySelectStyles: TCreateCurrencySelectStyles = ({
   hasWarning,
   hasError,
+  isCondensed,
   isDisabled,
   isReadOnly,
   menuPortalZIndex,
@@ -112,6 +115,7 @@ const createCurrencySelectStyles: TCreateCurrencySelectStyles = ({
     hasWarning,
     hasError,
     menuPortalZIndex,
+    isCondensed,
     isReadOnly,
     isDisabled,
   });
@@ -460,6 +464,10 @@ type TMoneyInputProps = {
    * Called when input is focused
    */
   onFocus?: (event: TCustomEvent) => void;
+  /**
+   * Use this property to reduce the paddings of the component for a ui compact variant
+   */
+  isCondensed?: boolean;
   /**
    * Indicates that the input cannot be modified (e.g not authorized, or changes currently saving).
    */
@@ -709,6 +717,7 @@ const MoneyInput = (props: TMoneyInputProps) => {
   const currencySelectStyles = createCurrencySelectStyles({
     hasWarning: props.hasWarning,
     hasError: props.hasError,
+    isCondensed: props.isCondensed,
     isDisabled: props.isDisabled,
     isReadOnly: props.isReadOnly,
     menuPortalZIndex: props.menuPortalZIndex,
@@ -785,6 +794,7 @@ const MoneyInput = (props: TMoneyInputProps) => {
         {hasNoCurrencies ? (
           <CurrencyLabel
             id={MoneyInput.getAmountInputId(moneyInputId) as string}
+            isCondensed={props.isCondensed}
             isDisabled={props.isDisabled}
             isReadOnly={props.isReadOnly}
           >