Merge branch 'main' into feat/search-component

.changeset/olive-plants-impress.md

@@ -0,0 +1,7 @@
+---
+"@ultraviolet/form": patch
+"@ultraviolet/plus": patch
+"@ultraviolet/ui": patch
+---
+
+`<NumberInputV2 />`: possibility to hide controls

.github/workflows/ci.yml

@@ -57,7 +57,7 @@ jobs:
       - run: pnpm run build
       - run: pnpm install
       - run: pnpm run test:unit:coverage
-      - uses: codecov/codecov-action@v4.4.1
+      - uses: codecov/codecov-action@v4.5.0
         with:
           # files: packages/**/coverage/cobertura-coverage.xmls
           token: ${{ secrets.CODECOV_TOKEN }}

packages/form/src/components/NumberInputFieldV2/__tests__/__snapshots__/index.test.tsx.snap

@@ -73,6 +73,10 @@ exports[`NumberInputFieldV2 > should render correctly 1`] = `
   cursor: not-allowed;
 }
 
+.emotion-2[data-controls='false']>.emotion-10 {
+  border-width: 0;
+}
+
 .emotion-4 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -275,6 +279,10 @@ exports[`NumberInputFieldV2 > should render correctly 1`] = `
   color: #727683;
 }
 
+.emotion-13[data-controls='false'] {
+  text-align: left;
+}
+
 <div
     data-testid="testing"
   >
@@ -287,6 +295,7 @@ exports[`NumberInputFieldV2 > should render correctly 1`] = `
         <div>
           <div
             class="emotion-2 emotion-3"
+            data-controls="true"
             data-disabled="false"
             data-error="false"
             data-success="false"
@@ -317,6 +326,7 @@ exports[`NumberInputFieldV2 > should render correctly 1`] = `
             >
               <input
                 class="emotion-13 emotion-14"
+                data-controls="true"
                 data-has-unit="false"
                 data-size="large"
                 id=":r0:"
@@ -429,6 +439,10 @@ exports[`NumberInputFieldV2 > should render correctly disabled 1`] = `
   cursor: not-allowed;
 }
 
+.emotion-2[data-controls='false']>.emotion-10 {
+  border-width: 0;
+}
+
 .emotion-4 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -622,6 +636,10 @@ exports[`NumberInputFieldV2 > should render correctly disabled 1`] = `
   color: #727683;
 }
 
+.emotion-13[data-controls='false'] {
+  text-align: left;
+}
+
 <div
     data-testid="testing"
   >
@@ -634,6 +652,7 @@ exports[`NumberInputFieldV2 > should render correctly disabled 1`] = `
         <div>
           <div
             class="emotion-2 emotion-3"
+            data-controls="true"
             data-disabled="true"
             data-error="false"
             data-success="false"
@@ -666,6 +685,7 @@ exports[`NumberInputFieldV2 > should render correctly disabled 1`] = `
               <input
                 aria-label="Number Input"
                 class="emotion-13 emotion-14"
+                data-controls="true"
                 data-has-unit="false"
                 data-size="large"
                 disabled=""

packages/form/src/components/NumberInputFieldV2/index.tsx

@@ -35,6 +35,7 @@ type NumberInputV2Props<
       | 'readOnly'
       | 'min'
       | 'max'
+      | 'controls'
     >
   > & {
     className?: string
@@ -64,6 +65,7 @@ export const NumberInputFieldV2 = <
   success,
   helper,
   rules,
+  controls = true,
   'aria-label': ariaLabel,
   'data-testid': dataTestId,
   required,
@@ -119,6 +121,7 @@ export const NumberInputFieldV2 = <
       autoFocus={autoFocus}
       readOnly={readOnly}
       required={required}
+      controls={controls}
     />
   )
 }

packages/plus/src/components/EstimateCost/Components/NumberInput.tsx

@@ -10,6 +10,7 @@ type NumberInputProps = {
   getAmountValue?: (amount?: number | null) => void
   minValue?: number
   maxValue?: number
+  controls?: boolean
 }
 
 export const NumberInput = ({
@@ -18,6 +19,7 @@ export const NumberInput = ({
   maxValue = 100,
   getAmountValue,
   itemCallback,
+  controls = true,
 }: NumberInputProps) => {
   const { isOverlay } = useOverlay()
   const [value, setValue] = useState<number | undefined | null>(amount)
@@ -41,6 +43,7 @@ export const NumberInput = ({
         getAmountValue?.(newValue)
       }}
       value={value}
+      controls={controls}
     />
   )
 }

packages/plus/src/components/EstimateCost/__stories__/Design.stories.tsx

@@ -22,12 +22,14 @@ Design.args = {
 
 Design.parameters = {
   docs: {
-    storyDescription:
-      'There are multiple design prop that you can change to show each item differently.<br/>' +
-      '- `tabulation` can be used to add padding left on label of the item<br/>' +
-      '- `noPrice` can be used to remove price of the item<br/>' +
-      '- `noBorder` can be used to removed bottom border of the item<br/>' +
-      '- `hideFromOverlay` will hide the item from overlay<br/>' +
-      '- `shouldBeHidden` will hide the item from overlay on small screens<br/>',
+    description: {
+      story:
+        'There are multiple design prop that you can change to show each item differently.<br/>' +
+        '- `tabulation` can be used to add padding left on label of the item<br/>' +
+        '- `noPrice` can be used to remove price of the item<br/>' +
+        '- `noBorder` can be used to removed bottom border of the item<br/>' +
+        '- `hideFromOverlay` will hide the item from overlay<br/>' +
+        '- `shouldBeHidden` will hide the item from overlay on small screens<br/>',
+    },
   },
 }

packages/plus/src/components/EstimateCost/__stories__/GlobalDiscount.stories.tsx

@@ -18,8 +18,10 @@ GlobalDiscount.args = {
 
 GlobalDiscount.parameters = {
   docs: {
-    storyDescription:
-      'A global or local discount can be applied to your total using `discount` prop that take a value between 0 and 1 (ex: 0.5 equivalent to 50% discount).<br/>' +
-      'To make it global just add the prop `discount` to `EstimateCost`. Also you can use the prop `isBeta` to show a beta badge with the discount value.',
+    description: {
+      story:
+        'A global or local discount can be applied to your total using `discount` prop that take a value between 0 and 1 (ex: 0.5 equivalent to 50% discount).<br/>' +
+        'To make it global just add the prop `discount` to `EstimateCost`. Also you can use the prop `isBeta` to show a beta badge with the discount value.',
+    },
   },
 }

packages/plus/src/components/EstimateCost/__stories__/Item.stories.tsx

@@ -21,8 +21,10 @@ Item.args = {
 
 Item.parameters = {
   docs: {
-    storyDescription:
-      'Items are required to build and display your EstimateCost. In fact, `EstimateCost.Item` ' +
-      'is use to display each items of your total price. You can define a bunch of parameters such as `label`, `subLabel`, `price`, ...',
+    description: {
+      story:
+        'Items are required to build and display your EstimateCost. In fact, `EstimateCost.Item` ' +
+        'is use to display each items of your total price. You can define a bunch of parameters such as `label`, `subLabel`, `price`, ...',
+    },
   },
 }

packages/plus/src/components/EstimateCost/__stories__/LocalDiscount.stories.tsx

@@ -23,7 +23,9 @@ LocalDiscount.args = {
 
 LocalDiscount.parameters = {
   docs: {
-    storyDescription:
-      'To make it local to one item add prop `discount` to the desired item `EstimateCost.Item`',
+    description: {
+      story:
+        'To make it local to one item add prop `discount` to the desired item `EstimateCost.Item`',
+    },
   },
 }

packages/plus/src/components/EstimateCost/__stories__/NumberInput.stories.tsx

@@ -28,11 +28,13 @@ NumberInput.args = {
 
 NumberInput.parameters = {
   docs: {
-    storyDescription:
-      'Item NumberInput is an interactive input. It allows user to change the amount of an item and see how much it will cost. <br/>' +
-      'The component `EstimateCost.Item` include a prop called `amountFree` as number. This number is deducted to NumberInput value ' +
-      '(check example with 2 million queries free).' +
-      '<br/><br/>' +
-      'You can get value of the amount set in NumberInput by using `getAmountValue` prop.',
+    description: {
+      story:
+        'Item NumberInput is an interactive input. It allows user to change the amount of an item and see how much it will cost. <br/>' +
+        'The component `EstimateCost.Item` include a prop called `amountFree` as number. This number is deducted to NumberInput value ' +
+        '(check example with 2 million queries free).' +
+        '<br/><br/>' +
+        'You can get value of the amount set in NumberInput by using `getAmountValue` prop. <br/>You can hide controls in NumberInput by using `controls` prop.',
+    },
   },
 }

packages/plus/src/components/EstimateCost/__stories__/Region.stories.tsx

@@ -16,7 +16,8 @@ Region.args = {
 
 Region.parameters = {
   docs: {
-    storyDescription:
-      'Region is a composed Item that will display a specific region.',
+    description: {
+      story: 'Region is a composed Item that will display a specific region.',
+    },
   },
 }

packages/plus/src/components/EstimateCost/__stories__/Unit.stories.tsx

@@ -23,11 +23,13 @@ Unit.args = {
 
 Unit.parameters = {
   docs: {
-    storyDescription:
-      'Item unit is an interactive input. It allows customers to change the value to see how much it will cost. <br/>' +
-      'The component `EstimateCost.Item` include a prop called `amountFree` as number. This number is deducted to NumberInput ' +
-      'value (check example with 50 GB Free).' +
-      '<br/><br/>' +
-      'You can get value of the amount set in NumberInput by using `getAmountValue` prop.',
+    description: {
+      story:
+        'Item unit is an interactive input. It allows customers to change the value to see how much it will cost. <br/>' +
+        'The component `EstimateCost.Item` include a prop called `amountFree` as number. This number is deducted to NumberInput ' +
+        'value (check example with 50 GB Free).' +
+        '<br/><br/>' +
+        'You can get value of the amount set in NumberInput by using `getAmountValue` prop.',
+    },
   },
 }