refactor: rename InputNumber to NumberInput

CHANGELOG.md

@@ -3,7 +3,7 @@
 ## v2.0.12
 
 - Removes the `CurrencyInput` component
-- Add the `InputNumber` component
+- Add the `NumberInput` component
 
 ## v2.0.11
 

src/components/InputNumber/InputNumber.mdx → src/components/NumberInput/NumberInput.mdx

@@ -1,5 +1,5 @@
 import { Canvas, ArgTypes, PRIMARY_STORY } from '@storybook/addon-docs';
-import { Primary, Currency } from './InputNumber.stories';
+import { Primary, Currency } from './NumberInput.stories';
 
 # Input Number
 

src/components/InputNumber/InputNumber.stories.js → src/components/NumberInput/NumberInput.stories.js

@@ -1,10 +1,10 @@
-import InputNumber from './InputNumber.vue';
-import mdx from './InputNumber.mdx';
-import { InputNumberMode } from './constants';
+import NumberInput from './NumberInput.vue';
+import mdx from './NumberInput.mdx';
+import { NumberInputMode } from './constants';
 
 export default {
   title: 'Components/Input Number',
-  component: InputNumber,
+  component: NumberInput,
   parameters: {
     docs: {
       page: mdx
@@ -30,7 +30,7 @@ export default {
       control: 'number'
     },
     mode: {
-      options: Object.values(InputNumberMode),
+      options: Object.values(NumberInputMode),
       control: {
         type: 'select'
       }
@@ -44,14 +44,14 @@ export default {
   }
 };
 
-const inputNumberModel = 5000;
+const numberInputModel = 5000;
 
 const PrimaryTemplate = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  components: { InputNumber },
+  components: { NumberInput },
   setup: () => ({ args }),
-  data: () => ({ inputNumberModel }),
-  template: '<InputNumber v-bind="args" v-model="inputNumberModel" />'
+  data: () => ({ numberInputModel }),
+  template: '<NumberInput v-bind="args" v-model="numberInputModel" />'
 });
 
 export const Primary = PrimaryTemplate.bind({});
@@ -61,17 +61,17 @@ Primary.args = {
   label: 'Input Number',
   helperText: 'Helper text',
   placeholder: 'Amount',
-  mode: InputNumberMode.DECIMAL
+  mode: NumberInputMode.DECIMAL
 };
 
-const inputCurrencyModel = 5000;
+const currencyInputModel = 5000;
 
 const CurrencyTemplate = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  components: { InputNumber },
+  components: { NumberInput },
   setup: () => ({ args }),
-  data: () => ({ inputCurrencyModel }),
-  template: '<InputNumber v-bind="args" v-model="inputCurrencyModel" />'
+  data: () => ({ currencyInputModel }),
+  template: '<NumberInput v-bind="args" v-model="currencyInputModel" />'
 });
 
 export const Currency = CurrencyTemplate.bind({});
@@ -80,5 +80,5 @@ Currency.args = {
   name: 'input-currency',
   label: 'Input Currency',
   placeholder: 'Amount',
-  mode: InputNumberMode.CURRENCY
+  mode: NumberInputMode.CURRENCY
 };

src/components/InputNumber/InputNumber.vue → src/components/NumberInput/NumberInput.vue

@@ -60,7 +60,7 @@ import InputNumber, { InputNumberProps } from 'primevue/inputnumber';
 import { InputHTMLAttributes, computed, useAttrs } from 'vue';
 
 import Label from '../Label/Label.vue';
-import { InputNumberMode } from './constants';
+import { NumberInputMode } from './constants';
 
 const attrs = useAttrs();
 
@@ -76,7 +76,7 @@ const props = withDefaults(
     maxFractionDigits?: InputNumberProps['maxFractionDigits'];
     min?: InputNumberProps['min'];
     minFractionDigits?: InputNumberProps['minFractionDigits'];
-    mode?: InputNumberMode;
+    mode?: NumberInputMode;
     modelValue?: number;
     name: string;
     placeholder?: InputNumberProps['placeholder'];
@@ -93,7 +93,7 @@ const props = withDefaults(
     maxFractionDigits: undefined,
     min: undefined,
     minFractionDigits: undefined,
-    mode: InputNumberMode.DECIMAL,
+    mode: NumberInputMode.DECIMAL,
     modelValue: 0,
     placeholder: undefined,
     readonly: false,
@@ -119,7 +119,7 @@ const computedInputProps = computed<InputHTMLAttributes>(() => {
   };
 });
 const currency = computed(() =>
-  props.mode === InputNumberMode.CURRENCY ? 'USD' : undefined
+  props.mode === NumberInputMode.CURRENCY ? 'USD' : undefined
 );
 </script>
 
@@ -189,3 +189,4 @@ const currency = computed(() =>
   }
 }
 </style>
+NumberInputModeNumberInputModeNumberInputModeNumberInputModeNumberInputModeNumberInputModeNumberInputModeNumberInputMode

src/components/InputNumber/__tests__/InputNumber.spec.ts → src/components/NumberInput/__tests__/InputNumber.spec.ts

@@ -1,10 +1,10 @@
 import '@testing-library/jest-dom';
 import { fireEvent, render } from '@testing-library/vue';
-import InputNumber from '../InputNumber.vue';
+import NumberInput from '../NumberInput.vue';
 import { ExtractPropTypes } from 'vue';
 
-describe('InputNumber', () => {
-  const DEFAULT_PROPS: ExtractPropTypes<typeof InputNumber> = {
+describe('NumberInput', () => {
+  const DEFAULT_PROPS: ExtractPropTypes<typeof NumberInput> = {
     label: 'Test Input Number',
     id: 'test-input-number',
     name: 'test',
@@ -13,7 +13,7 @@ describe('InputNumber', () => {
   };
 
   it('renders', () => {
-    const { getByTestId } = render(InputNumber, { props: DEFAULT_PROPS });
+    const { getByTestId } = render(NumberInput, { props: DEFAULT_PROPS });
     expect(getByTestId('uic-input-number-container')).toBeVisible();
     const label = getByTestId('uic-input-number-label');
     expect(label).toBeVisible();
@@ -25,7 +25,7 @@ describe('InputNumber', () => {
   });
 
   it('updates', () => {
-    const { getByTestId } = render(InputNumber, {
+    const { getByTestId } = render(NumberInput, {
       props: { ...DEFAULT_PROPS, modelValue: 50 }
     });
     const numberInput = getByTestId('uic-input-number');
@@ -36,7 +36,7 @@ describe('InputNumber', () => {
   });
 
   it('emits focus', () => {
-    const { getByTestId, emitted } = render(InputNumber, {
+    const { getByTestId, emitted } = render(NumberInput, {
       props: DEFAULT_PROPS
     });
     const numberInput = getByTestId('uic-input-number');
@@ -46,7 +46,7 @@ describe('InputNumber', () => {
   });
 
   it('emits blur', () => {
-    const { getByTestId, emitted } = render(InputNumber, {
+    const { getByTestId, emitted } = render(NumberInput, {
       props: DEFAULT_PROPS
     });
     const numberInput = getByTestId('uic-input-number');

src/components/NumberInput/constants.ts

@@ -0,0 +1,6 @@
+export const NumberInputMode = {
+  CURRENCY: 'currency',
+  DECIMAL: 'decimal'
+} as const;
+export type NumberInputMode =
+  (typeof NumberInputMode)[keyof typeof NumberInputMode];

src/components/index.js

@@ -13,7 +13,6 @@ export { default as FileUpload } from './FileUpload/FileUpload';
 export { default as FilterContent } from './FilterContent/FilterContent';
 export { default as Icon } from './Icon/Icon.vue';
 export * from './Icons';
-export { default as InputNumber } from './InputNumber/InputNumber.vue';
 export { default as LegacyModal } from './LegacyModal/LegacyModal.vue';
 export { default as LoadingIndicator } from './LoadingIndicator/LoadingIndicator';
 export { default as LobLink } from './Link/Link';
@@ -24,6 +23,7 @@ export { default as MainNavigationChildItem } from './MainNavigation/MainNavigat
 export { default as MegaButton } from './MegaButton/MegaButton';
 export { default as Modal } from './Modal/Modal.vue';
 export { default as Multiselect } from './Multiselect/Multiselect';
+export { default as NumberInput } from './NumberInput/NumberInput.vue';
 export { default as Pagination } from './Pagination/Pagination';
 export { default as ProgressBar } from './ProgressBar/ProgressBar';
 export { default as RadioButton } from './RadioButton/RadioButton';