pixel-react 1.6.8 → 1.6.9

package/src/components/PhoneInput/PhoneInput.stories.tsx

@@ -1,95 +1,95 @@
-import React, { useState } from 'react';
-import { PhoneInputProps } from './types';
-import PhoneInputField from './PhoneInput';
-
-export default {
-  title: 'Components/PhoneInputComponent',
-  component: PhoneInputField,
-};
-
-const Template = ({
-  value,
-  country,
-  width,
-  onChange,
-  placeholder,
-  onFocus,
-  onBlur,
-  isValid,
-}: PhoneInputProps) => {
-  const [phone, setPhone] = useState<string>(value || '');
-  const [valid, setValid] = useState(true);
-
-  const handlePhoneChange = (newPhone: string) => {
-    setPhone(newPhone);
-    const validPhoneNumberLength = country === 'IN' ? 10 : newPhone.length;
-    const phoneIsValid = newPhone.length === validPhoneNumberLength;
-    setValid(phoneIsValid);
-    onChange(newPhone);
-  };
-
-  return (
-    <PhoneInputField
-      value={phone}
-      country={country}
-      onChange={handlePhoneChange}
-      width={width}
-      placeholder={placeholder}
-      onFocus={onFocus}
-      onBlur={onBlur}
-      isValid={valid}
-    />
-  );
-};
-
-// Default story
-export const Default = Template.bind({});
-Default.args = {
-  country: 'IN',
-  value: '9134567890',
-  width: '400px',
-  placeholder: 'Enter phone number',
-  onChange: () => {},
-  onFocus: () => {},
-  onBlur: () => {},
-  isValid: true,
-};
-
-// Story with initial value
-export const WithInitialValue = Template.bind({});
-WithInitialValue.args = {
-  country: 'IN',
-  value: '9176543210',
-  width: '300px',
-  onChange: () => {},
-  placeholder: 'Enter phone number',
-  onFocus: () => {},
-  onBlur: () => {},
-  isValid: true,
-};
-
-// Story with a custom country
-export const WithCustomCountry = Template.bind({});
-WithCustomCountry.args = {
-  country: 'IN',
-  value: '9176543210',
-  width: '300px',
-  onChange: () => {},
-  placeholder: 'Enter phone number',
-  onFocus: () => {},
-  onBlur: () => {},
-  isValid: true,
-};
-
-// Story with empty value
-export const EmptyValue = Template.bind({});
-EmptyValue.args = {
-  country: 'IN',
-  value: '91',
-  width: '500px',
-  onChange: () => {},
-  placeholder: 'Enter phone number',
-  onFocus: () => {},
-  onBlur: () => {},
-  isValid: false,
-};
+import React, { useState } from 'react';
+import { PhoneInputProps } from './types';
+import PhoneInputField from './PhoneInput';
+
+export default {
+  title: 'Components/PhoneInputComponent',
+  component: PhoneInputField,
+};
+
+const Template = ({
+  value,
+  country,
+  width,
+  onChange,
+  placeholder,
+  onFocus,
+  onBlur,
+  isValid,
+}: PhoneInputProps) => {
+  const [phone, setPhone] = useState<string>(value || '');
+  const [valid, setValid] = useState(true);
+
+  const handlePhoneChange = (newPhone: string) => {
+    setPhone(newPhone);
+    const validPhoneNumberLength = country === 'IN' ? 10 : newPhone.length;
+    const phoneIsValid = newPhone.length === validPhoneNumberLength;
+    setValid(phoneIsValid);
+    onChange(newPhone);
+  };
+
+  return (
+    <PhoneInputField
+      value={phone}
+      country={country}
+      onChange={handlePhoneChange}
+      width={width}
+      placeholder={placeholder}
+      onFocus={onFocus}
+      onBlur={onBlur}
+      isValid={valid}
+    />
+  );
+};
+
+// Default story
+export const Default = Template.bind({});
+Default.args = {
+  country: 'IN',
+  value: '9134567890',
+  width: '400px',
+  placeholder: 'Enter phone number',
+  onChange: () => {},
+  onFocus: () => {},
+  onBlur: () => {},
+  isValid: true,
+};
+
+// Story with initial value
+export const WithInitialValue = Template.bind({});
+WithInitialValue.args = {
+  country: 'IN',
+  value: '9176543210',
+  width: '300px',
+  onChange: () => {},
+  placeholder: 'Enter phone number',
+  onFocus: () => {},
+  onBlur: () => {},
+  isValid: true,
+};
+
+// Story with a custom country
+export const WithCustomCountry = Template.bind({});
+WithCustomCountry.args = {
+  country: 'IN',
+  value: '9176543210',
+  width: '300px',
+  onChange: () => {},
+  placeholder: 'Enter phone number',
+  onFocus: () => {},
+  onBlur: () => {},
+  isValid: true,
+};
+
+// Story with empty value
+export const EmptyValue = Template.bind({});
+EmptyValue.args = {
+  country: 'IN',
+  value: '91',
+  width: '500px',
+  onChange: () => {},
+  placeholder: 'Enter phone number',
+  onFocus: () => {},
+  onBlur: () => {},
+  isValid: false,
+};

package/src/components/PhoneInput/PhoneInput.tsx

@@ -1,90 +1,90 @@
-import React, { useState, useEffect } from 'react';
-import PhoneInput from 'react-phone-input-2';
-import 'react-phone-input-2/lib/style.css';
-import { PhoneInputProps } from './types';
-import Typography from '../Typography';
-import './PhoneInput.scss';
-
-const PhoneInputField: React.FC<PhoneInputProps> = ({
-  country,
-  value,
-  onChange,
-  width = '100%',
-  placeholder = 'Enter phone number',
-  onFocus,
-  onBlur,
-}) => {
-  const [phone, setPhone] = useState<string>(value);
-  const [isFocused, setIsFocused] = useState(false);
-  const [error, setError] = useState<string>('');
-
-  useEffect(() => {
-    if (value !== phone) {
-      setPhone(value);
-    }
-  }, [value]);
-
-  const handlePhoneChange = (phone: string) => {
-    const numericPhone = phone.replace(/[^0-9+]/g, '');
-    const countryCode = numericPhone.startsWith('+')
-      ? numericPhone.substring(0, 3)
-      : '';
-    let phoneNumber = numericPhone.replace(countryCode, '');
-
-    let validPhoneNumberLength = 10;
-    if (country === 'IN') {
-      if (phoneNumber.length < validPhoneNumberLength) {
-        setError('Phone number should be exactly 10 digits');
-      } else {
-        setError('');
-      }
-    }
-
-    if (phoneNumber.length <= validPhoneNumberLength) {
-      setPhone(numericPhone);
-      onChange(numericPhone);
-    }
-  };
-
-  const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {
-    setIsFocused(true);
-    if (onFocus) onFocus(event);
-  };
-
-  const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {
-    setIsFocused(false);
-    if (onBlur) onBlur(event);
-  };
-
-  return (
-    <div>
-      <PhoneInput
-        country={country}
-        value={phone}
-        onChange={handlePhoneChange}
-        inputStyle={{
-          width,
-          height: '32px',
-          border: isFocused
-            ? '1px solid var(--brand-color)'
-            : error
-            ? '1px solid var(--error_light)'
-            : '1px solid var(--default-color)',
-          borderRadius: '4px',
-          fontSize: '14px',
-          transition: 'border-color 0.3s ease',
-        }}
-        placeholder={placeholder}
-        onFocus={handleFocus}
-        onBlur={handleBlur}
-      />
-      {error && !isFocused && (
-        <Typography color={'var(--error_light)'} className="error">
-          {error}
-        </Typography>
-      )}
-    </div>
-  );
-};
-
-export default PhoneInputField;
+import React, { useState, useEffect } from 'react';
+import PhoneInput from 'react-phone-input-2';
+import 'react-phone-input-2/lib/style.css';
+import { PhoneInputProps } from './types';
+import Typography from '../Typography';
+import './PhoneInput.scss';
+
+const PhoneInputField: React.FC<PhoneInputProps> = ({
+  country,
+  value,
+  onChange,
+  width = '100%',
+  placeholder = 'Enter phone number',
+  onFocus,
+  onBlur,
+}) => {
+  const [phone, setPhone] = useState<string>(value);
+  const [isFocused, setIsFocused] = useState(false);
+  const [error, setError] = useState<string>('');
+
+  useEffect(() => {
+    if (value !== phone) {
+      setPhone(value);
+    }
+  }, [value]);
+
+  const handlePhoneChange = (phone: string) => {
+    const numericPhone = phone.replace(/[^0-9+]/g, '');
+    const countryCode = numericPhone.startsWith('+')
+      ? numericPhone.substring(0, 3)
+      : '';
+    let phoneNumber = numericPhone.replace(countryCode, '');
+
+    let validPhoneNumberLength = 10;
+    if (country === 'IN') {
+      if (phoneNumber.length < validPhoneNumberLength) {
+        setError('Phone number should be exactly 10 digits');
+      } else {
+        setError('');
+      }
+    }
+
+    if (phoneNumber.length <= validPhoneNumberLength) {
+      setPhone(numericPhone);
+      onChange(numericPhone);
+    }
+  };
+
+  const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {
+    setIsFocused(true);
+    if (onFocus) onFocus(event);
+  };
+
+  const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {
+    setIsFocused(false);
+    if (onBlur) onBlur(event);
+  };
+
+  return (
+    <div>
+      <PhoneInput
+        country={country}
+        value={phone}
+        onChange={handlePhoneChange}
+        inputStyle={{
+          width,
+          height: '32px',
+          border: isFocused
+            ? '1px solid var(--brand-color)'
+            : error
+            ? '1px solid var(--error_light)'
+            : '1px solid var(--default-color)',
+          borderRadius: '4px',
+          fontSize: '14px',
+          transition: 'border-color 0.3s ease',
+        }}
+        placeholder={placeholder}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+      />
+      {error && !isFocused && (
+        <Typography color={'var(--error_light)'} className="error">
+          {error}
+        </Typography>
+      )}
+    </div>
+  );
+};
+
+export default PhoneInputField;

package/src/components/PhoneInput/index.ts

@@ -1 +1 @@
-export { default } from './PhoneInput';
+export { default } from './PhoneInput';

package/src/components/PhoneInput/phoneInput.scss

@@ -1,3 +1,3 @@
-.error {
-  margin-top: 5px;
-}
+.error {
+  margin-top: 5px;
+}

package/src/components/PhoneInput/types.ts

@@ -1,10 +1,10 @@
-export interface PhoneInputProps {
-  country: string;
-  value: string;
-  onChange: (phone: string) => void;
-  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
-  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
-  width?: string;
-  placeholder?: string;
-  isValid: any;
-}
+export interface PhoneInputProps {
+  country: string;
+  value: string;
+  onChange: (phone: string) => void;
+  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+  width?: string;
+  placeholder?: string;
+  isValid: any;
+}

package/src/components/PopUpModal/PopUpModal.scss

@@ -1,36 +1,36 @@
-.warning_modal_container {
-  height: 100%;
-}
-.warning_modal_content {
-  display: flex;
-  height: 80%;
-  width: 100%;
-}
-.warning_modal_icon {
-  position: relative;
-  bottom: 16px;
-  right: 4px;
-}
-.warning_modal_title_wrapper {
-  line-height: 30px;
-}
-.warning_modal_message_wrapper {
-  padding-top: 8px;
-  display: flex;
-  height: 100%;
-  flex-direction: column;
-  justify-content: space-between;
-}
-.warning_modal_message {
-  display: flex;
-  flex-direction: column;
-  line-height: 24px;
-}
-.warning_modal_footer_button {
-  height: 20%;
-  width: 100%;
-  display: flex;
-  align-items: flex-end;
-  justify-content: flex-end;
-  gap: 8px;
-}
+.warning_modal_container {
+  height: 100%;
+}
+.warning_modal_content {
+  display: flex;
+  height: 80%;
+  width: 100%;
+}
+.warning_modal_icon {
+  position: relative;
+  bottom: 16px;
+  right: 4px;
+}
+.warning_modal_title_wrapper {
+  line-height: 30px;
+}
+.warning_modal_message_wrapper {
+  padding-top: 8px;
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.warning_modal_message {
+  display: flex;
+  flex-direction: column;
+  line-height: 24px;
+}
+.warning_modal_footer_button {
+  height: 20%;
+  width: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-end;
+  gap: 8px;
+}

package/src/components/PopUpModal/PopUpModal.stories.tsx

@@ -1,62 +1,67 @@
-import React, { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import PopUpModal from './PopUpModal';
-import Button from '../Button';
-
-const meta: Meta<typeof PopUpModal> = {
-  title: 'Components/PopUpModal',
-  component: PopUpModal,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-};
-
-type Story = StoryObj<typeof PopUpModal>;
-
-const defaultArgs = {
-  iconName: "license_warning",
-  titleMessage: "Warning!",
-  subTitleMessage: "Unsaved Changes.",
-  modalMessage: "Your web service data will be lost. Are you sure you want to exit?",
-  footerMessage: "How do you want to proceed?",
-  firstButtonLabel: "Cancel",
-  secondButtonLabel: "Continue",
-  buttonVariant: "warning",
-  border: '1px solid var(--warning-modal-border-color)',
-  colorForTitleMessage: 'var(--status-button-bg-warning)'
-}
-
-export const DefaultModal: Story = {
-  args: {
-    isOpen: true,
-    onClose: () => alert('Closed'),
-    onContinue: () => alert('Continued'),
-    iconName: 'license_warning',
-    titleMessage: 'Warning!',
-    subTitleMessage: 'Unsaved Changes.',
-  },
-};
-
-export const ControlledPopUp: Story = {
-  render: () => {
-    const [isOpen, setIsOpen] = useState(false);
-    const handleContinue = () => {
-      alert('Continued!');
-      setIsOpen(false);
-    };
-    return (
-      <>
-        <Button variant="warning" onClick={() => setIsOpen(true)} label='Open PopUp' />
-        <PopUpModal
-          {...defaultArgs}
-          isOpen={isOpen}
-          onClose={() => setIsOpen(false)}
-          onContinue={handleContinue}
-        />
-      </>
-    );
-  },
-};
-
-export default meta;
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import PopUpModal from './PopUpModal';
+import Button from '../Button';
+import Typography from '../Typography';
+
+const meta: Meta<typeof PopUpModal> = {
+  title: 'Components/PopUpModal',
+  component: PopUpModal,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof PopUpModal>;
+
+const defaultArgs = {
+    iconName:"license_warning",
+    titleMessage:"Warning!",
+    subTitleMessage:"Unsaved Changes.",
+    modalMessage:"Your web service data will be lost. Are you sure you want to exit?",
+    firstButtonLabel:"Cancel",
+    secondButtonLabel:"Continue",
+    buttonVariant:"warning",
+    border:'1px solid var(--warning-modal-border-color)',
+    colorForTitleMessage: 'var(--status-button-bg-warning)',
+    popupWidth:'420',
+    footerContent:<Typography children='How do you want to proceed?' fontSize={16}/>
+}
+
+export const DefaultModal: Story = {
+  args: {
+    isOpen: true,
+    onClose: () => alert('Closed'),
+    onContinue: () => alert('Continued'),
+    iconName: 'license_warning',
+    titleMessage: 'Warning!',
+    subTitleMessage: 'Unsaved Changes.',
+    popupWidth: "420",
+    footerContent:<Typography children='How do you want to proceed?' fontSize={16}/>,
+  },
+};
+
+export const ControlledPopUp: Story = {
+  render: () => {
+    const [isOpen, setIsOpen] = useState(false);
+    const handleContinue = () => {
+      alert('Continued!');
+      setIsOpen(false);
+    };
+    return (
+      <>
+        <Button variant="warning" onClick={() => setIsOpen(true)} label='Open PopUp' />
+        <PopUpModal
+          {...defaultArgs}
+          isOpen={isOpen}
+          onClose={() => setIsOpen(false)}
+          onContinue={handleContinue}
+          footerContent={<Typography children='How do you want to proceed?' fontSize={16}/>}
+        />
+      </>
+    );
+  },
+};
+
+export default meta;