@bytebrand/fe-ui-core 4.2.65 → 4.2.66

package/__tests__/components/_common/MaterialField/MaterialField.test.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import MaterialField from '../../../../source/components/_common/MaterialField/MaterialField';
+
+describe('MaterialField', () => {
+  const props = {
+    label: 'Test Label',
+    value: 'Test Value',
+    onChange: jest.fn(),
+    disabled: false,
+    type: 'text',
+    autoComplete: 'off',
+    name: 'testName',
+    required: true,
+    multiline: false,
+    rows: 1,
+    placeholder: 'Test Placeholder'
+  };
+
+  it('renders the input element with the correct props', () => {
+    const { getByRole } = render(<MaterialField size='medium' {...props} />);
+    const inputElement = getByRole('textbox');
+    expect(inputElement).toBeInTheDocument();
+    expect(inputElement).toHaveAttribute('type', 'text');
+    expect(inputElement).toHaveAttribute('value', 'Test Value');
+    expect(inputElement).toHaveAttribute('name', 'testName');
+    expect(inputElement).toHaveAttribute('required');
+    expect(inputElement).toHaveAttribute('placeholder', 'Test Placeholder');
+  });
+
+  it('calls the onChange prop when the input value changes', () => {
+    const { getByRole } = render(<MaterialField size='medium' {...props} />);
+    const inputElement = getByRole('textbox');
+    fireEvent.change(inputElement, { target: { value: 'New Value' } });
+    expect(props.onChange).toHaveBeenCalledTimes(1);
+    expect(props.onChange).toHaveBeenCalledWith('New Value', 'testName', expect.anything());
+  });
+
+  it('toggles password visibility when the icon button is clicked', () => {
+    const passwordProps = {
+      ...props,
+      type: 'password'
+    }
+    const { getByRole, getByPlaceholderText } = render(<MaterialField size='medium' {...passwordProps} />);
+    const iconButton = getByRole('button');
+    const inputElement = getByPlaceholderText('Test Placeholder');
+    fireEvent.click(iconButton);
+    expect(inputElement).toHaveAttribute('type', 'text');
+
+    fireEvent.click(iconButton);
+
+    expect(inputElement).toHaveAttribute('type', 'password');
+
+    fireEvent.click(iconButton);
+
+    expect(inputElement).toHaveAttribute('type', 'text');
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core",
-  "version": "4.2.65",
+  "version": "4.2.66",
   "description": "UI components for the auto.de project",
   "main": "index.ts",
   "module": "dist/common.js",

package/source/components/_common/MaterialField/MaterialField.styled.tsx

@@ -12,14 +12,14 @@ export const Theme = createTheme({
     },
     MuiInputLabel: {
       styleOverrides: {
-        root: ({ ownerState }) => ({
-          ...(ownerState.size === 'smaller' && { // tslint:disable-line
+        root: ({ ownerState: { size } }: { ownerState: { size?: 'smaller' | 'custom' | 'normal' | 'small' | 'medium' } }) => ({
+          ...(size === 'smaller' && {
             marginTop: '-13px',
             ['&.MuiInputLabel-shrink, &.Mui-focused']: {
               marginTop: 0
             }
           }),
-          ...(ownerState.size === 'custom' && { // tslint:disable-line
+          ...(size === 'custom' && {
             marginTop: isMobileOnly ? '0px' :'-4px',
             ['&.MuiInputLabel-shrink, &.Mui-focused']: {
               marginTop: 0
@@ -30,13 +30,13 @@ export const Theme = createTheme({
     },
     MuiOutlinedInput: {
       styleOverrides: {
-        input: ({ ownerState }) => ({
-          ...(ownerState.size === 'smaller' && { // tslint:disable-line
+        input: ({ ownerState: { size } }: { ownerState: { size?: 'smaller' | 'custom' | 'normal' | 'small' | 'medium' } }) => ({
+          ...(size === 'smaller' && {
             height: 28,
             boxSizing: 'border-box',
             padding: '0 14px'
           }),
-          ...(ownerState.size === 'custom' && {
+          ...(size === 'custom' && {
             height: isMobileOnly ? 56 : 48,
             boxSizing: 'border-box'
           })

package/source/components/_common/MaterialField/MaterialField.tsx

@@ -64,7 +64,7 @@ const MaterialField: React.FC<IVehicleModalProps> = ({
     setShowPassword(!showPassword);
   };
 
-  const handleMouseDownPassword = (event) => {
+  const handleMouseDownPassword = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
     event.preventDefault();
   };
 

package/source/framework/utils/CommonUtils.ts

@@ -568,3 +568,15 @@ export const updateCookieList = () => {
   // grant Hotjar cookies
   if (isHotjarGranted && typeof window.grantHotjarCookieConsent === 'function') window.grantHotjarCookieConsent();
 };
+
+// function returns decimal part of number with 2 digits
+export const getCents = (value: number, prefix?: string, postfix?: string): string => {
+  if (!Number.isFinite(value)) return '';
+  const roundedValue = Math.floor(value);
+  const result = value.toFixed(2).toString().replace(`${roundedValue}.`, '');
+  return `${prefix}${result}${postfix}`;
+};
+
+export const priceParse = (value: any) => {
+  return !!value ? Number.parseFloat(value) : null;
+};

package/utils.ts

@@ -35,7 +35,9 @@ export {
   sliceLessThan,
   sliceMoreThan,
   buildQueryForSearch,
-  buildBodyForRequest
+  buildBodyForRequest,
+  priceParse,
+  getCents
 } from './source/framework/utils/CommonUtils';
 
 export {