Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(NumberInputV2): controls prop #3872

Merged
merged 4 commits into from
Jun 18, 2024
Merged

feat(NumberInputV2): controls prop #3872

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6fed491
feat: numberInputV2 controls prop
lisalupi Jun 13, 2024
5ed69ad
fix: increase size limit
lisalupi Jun 13, 2024
856733d
fix: update tests
lisalupi Jun 13, 2024
7f4e824
fix: add story description
lisalupi Jun 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions .changeset/olive-plants-impress.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
"@ultraviolet/form": patch
"@ultraviolet/plus": patch
"@ultraviolet/ui": patch
---

`<NumberInputV2 />`: possibility to hide controls
20 changes: 20 additions & 0 deletions packages/form/src/components/NumberInputFieldV2/__tests__/__snapshots__/index.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -275,6 +279,10 @@ exports[`NumberInputFieldV2 > should render correctly 1`] = `
color: #727683;
}

.emotion-13[data-controls='false'] {
text-align: left;
}

<div
data-testid="testing"
>
Expand All @@ -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"
Expand Down Expand Up @@ -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:"
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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"
>
Expand All @@ -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"
Expand Down Expand Up @@ -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=""
Expand Down
3 changes: 3 additions & 0 deletions packages/form/src/components/NumberInputFieldV2/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ type NumberInputV2Props<
| 'readOnly'
| 'min'
| 'max'
| 'controls'
>
> & {
className?: string
Expand Down Expand Up @@ -64,6 +65,7 @@ export const NumberInputFieldV2 = <
success,
helper,
rules,
controls = true,
'aria-label': ariaLabel,
'data-testid': dataTestId,
required,
Expand Down Expand Up @@ -119,6 +121,7 @@ export const NumberInputFieldV2 = <
autoFocus={autoFocus}
readOnly={readOnly}
required={required}
controls={controls}
/>
)
}
3 changes: 3 additions & 0 deletions packages/plus/src/components/EstimateCost/Components/NumberInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ type NumberInputProps = {
getAmountValue?: (amount?: number | null) => void
minValue?: number
maxValue?: number
controls?: boolean
}

export const NumberInput = ({
Expand All @@ -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)
Expand All @@ -41,6 +43,7 @@ export const NumberInput = ({
getAmountValue?.(newValue)
}}
value={value}
controls={controls}
/>
)
}
16 changes: 9 additions & 7 deletions packages/plus/src/components/EstimateCost/__stories__/Design.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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/>',
},
},
}
8 changes: 5 additions & 3 deletions packages/plus/src/components/EstimateCost/__stories__/GlobalDiscount.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.',
},
},
}
8 changes: 5 additions & 3 deletions packages/plus/src/components/EstimateCost/__stories__/Item.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`, ...',
},
},
}
6 changes: 4 additions & 2 deletions packages/plus/src/components/EstimateCost/__stories__/LocalDiscount.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`',
},
},
}
14 changes: 8 additions & 6 deletions packages/plus/src/components/EstimateCost/__stories__/NumberInput.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.',
},
},
}
5 changes: 3 additions & 2 deletions packages/plus/src/components/EstimateCost/__stories__/Region.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.',
},
},
}
14 changes: 8 additions & 6 deletions packages/plus/src/components/EstimateCost/__stories__/Unit.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.',
},
},
}
40 changes: 40 additions & 0 deletions packages/plus/src/components/EstimateCost/__tests__/__snapshots__/Stepper.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -814,6 +814,10 @@ exports[`EstimateCost - NumberInput Item > render basic props 1`] = `
cursor: not-allowed;
}

.emotion-101[data-controls='false']>.emotion-109 {
border-width: 0;
}

.emotion-103 {
display: -webkit-box;
display: -webkit-flex;
Expand Down Expand Up @@ -1002,6 +1006,10 @@ exports[`EstimateCost - NumberInput Item > render basic props 1`] = `
color: #727683;
}

.emotion-112[data-controls='false'] {
text-align: left;
}

.emotion-120 {
padding-left: 16px;
padding-right: 16px;
Expand Down Expand Up @@ -1354,6 +1362,7 @@ exports[`EstimateCost - NumberInput Item > render basic props 1`] = `
<div>
<div
class="emotion-101 emotion-102"
data-controls="true"
data-disabled="false"
data-error="false"
data-success="false"
Expand Down Expand Up @@ -1384,6 +1393,7 @@ exports[`EstimateCost - NumberInput Item > render basic props 1`] = `
>
<input
class="emotion-112 emotion-113"
data-controls="true"
data-has-unit="false"
data-size="small"
id=":r6:"
Expand Down Expand Up @@ -2285,6 +2295,10 @@ exports[`EstimateCost - NumberInput Item > render basic with overlay 1`] = `
cursor: not-allowed;
}

.emotion-101[data-controls='false']>.emotion-109 {
border-width: 0;
}

.emotion-103 {
display: -webkit-box;
display: -webkit-flex;
Expand Down Expand Up @@ -2473,6 +2487,10 @@ exports[`EstimateCost - NumberInput Item > render basic with overlay 1`] = `
color: #727683;
}

.emotion-112[data-controls='false'] {
text-align: left;
}

.emotion-120 {
padding-left: 16px;
padding-right: 16px;
Expand Down Expand Up @@ -2825,6 +2843,7 @@ exports[`EstimateCost - NumberInput Item > render basic with overlay 1`] = `
<div>
<div
class="emotion-101 emotion-102"
data-controls="true"
data-disabled="false"
data-error="false"
data-success="false"
Expand Down Expand Up @@ -2855,6 +2874,7 @@ exports[`EstimateCost - NumberInput Item > render basic with overlay 1`] = `
>
<input
class="emotion-112 emotion-113"
data-controls="true"
data-has-unit="false"
data-size="small"
id=":rl:"
Expand Down Expand Up @@ -3756,6 +3776,10 @@ exports[`EstimateCost - NumberInput Item > render with getAmountValue 1`] = `
cursor: not-allowed;
}

.emotion-101[data-controls='false']>.emotion-109 {
border-width: 0;
}

.emotion-103 {
display: -webkit-box;
display: -webkit-flex;
Expand Down Expand Up @@ -3944,6 +3968,10 @@ exports[`EstimateCost - NumberInput Item > render with getAmountValue 1`] = `
color: #727683;
}

.emotion-112[data-controls='false'] {
text-align: left;
}

.emotion-120 {
padding-left: 16px;
padding-right: 16px;
Expand Down Expand Up @@ -4296,6 +4324,7 @@ exports[`EstimateCost - NumberInput Item > render with getAmountValue 1`] = `
<div>
<div
class="emotion-101 emotion-102"
data-controls="true"
data-disabled="false"
data-error="false"
data-success="false"
Expand Down Expand Up @@ -4326,6 +4355,7 @@ exports[`EstimateCost - NumberInput Item > render with getAmountValue 1`] = `
>
<input
class="emotion-112 emotion-113"
data-controls="true"
data-has-unit="false"
data-size="small"
id=":r1m:"
Expand Down Expand Up @@ -5241,6 +5271,10 @@ exports[`EstimateCost - NumberInput Item > render with values 1`] = `
cursor: not-allowed;
}

.emotion-104[data-controls='false']>.emotion-112 {
border-width: 0;
}

.emotion-106 {
display: -webkit-box;
display: -webkit-flex;
Expand Down Expand Up @@ -5429,6 +5463,10 @@ exports[`EstimateCost - NumberInput Item > render with values 1`] = `
color: #727683;
}

.emotion-115[data-controls='false'] {
text-align: left;
}

.emotion-123 {
padding-left: 16px;
padding-right: 16px;
Expand Down Expand Up @@ -5798,6 +5836,7 @@ exports[`EstimateCost - NumberInput Item > render with values 1`] = `
<div>
<div
class="emotion-104 emotion-105"
data-controls="true"
data-disabled="false"
data-error="false"
data-success="false"
Expand Down Expand Up @@ -5828,6 +5867,7 @@ exports[`EstimateCost - NumberInput Item > render with values 1`] = `
>
<input
class="emotion-115 emotion-116"
data-controls="true"
data-has-unit="false"
data-size="small"
id=":r15:"
Expand Down
Loading
Loading