Merge pull request #26 from BeeInventor/feature/phone-light-mode

feat: add light mode

Author: steven11329

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@beeinventor/dasiot-react-component-lib",
-  "version": "1.1.10",
+  "version": "1.1.11",
   "module": "lib/index.js",
   "types": "lib/index.d.ts",
   "files": [

src/components/TextField/PhoneTextField/PhoneTextField.stories.tsx

@@ -118,6 +118,15 @@ Default.args = {
   countryCodeList,
 };
 
+export const ModeLight: Story<PhoneTextFieldProps> = Template.bind({});
+
+ModeLight.args = {
+  value: '',
+  placeholder: 'Phone Number',
+  countryCodeList,
+  mode: 'light',
+};
+
 export const Error: Story<PhoneTextFieldProps> = Template.bind({});
 
 Error.args = {

src/components/TextField/PhoneTextField/PhoneTextField.tsx

@@ -11,6 +11,8 @@ import ClickAwayListener from '@mui/material/ClickAwayListener';
 import { CountryCodeData } from '../../../Theme.types';
 import ComponentIcPhoneDbg from '../../../svg/ComponentIcPhoneDbg';
 import IcErrorIfo from '../../../svg/IcErrorIfo';
+import ComponentIcPhoneDbgBlack from '../../../svg/ComponentIcPhoneDbgBlack';
+import { Mode } from 'components/main.types';
 
 const DEFAULT_WIDTH = 320;
 const DEFAULT_HEIGHT = 50;
@@ -20,15 +22,19 @@ const Root = styled(Box)(({}) => ({
   flexDirection: 'column',
 }));
 
-const TextField = styled(Box)(({ theme }) => ({
+interface ModeProps {
+  mode?: Mode;
+}
+
+const TextField = styled(Box)<ModeProps>(({ theme, mode }) => ({
   ...theme.text.Body_16_Reg,
   display: 'flex',
   alignItems: 'center',
   minWidth: DEFAULT_WIDTH,
   height: DEFAULT_HEIGHT,
   minHeight: DEFAULT_HEIGHT,
-  color: '#FFFFFF',
-  backgroundColor: 'rgba(0, 0, 0, .5)',
+  color: mode === 'light' ? theme.color.secondary.$100 : '#FFF',
+  backgroundColor: mode === 'light' ? '#F5F5F5' : 'rgba(0, 0, 0, .5)',
   borderRadius: 4,
   padding: '13px 24px',
   '&.container--error': {
@@ -48,10 +54,10 @@ const PhoneCode = styled(Box)(({}) => ({
   },
 }));
 
-const Input = styled(InputBase)(({ theme }) => ({
+const Input = styled(InputBase)<ModeProps>(({ theme, mode }) => ({
   ...theme.text.Body_16_Reg,
   flex: 1,
-  color: 'white',
+  color: mode === 'light' ? theme.color.secondary.$100 : 'white',
   backgroundColor: 'transparent',
   outline: 'none',
   border: 'none',
@@ -60,10 +66,10 @@ const Input = styled(InputBase)(({ theme }) => ({
   },
 }));
 
-const Separator = styled(Box)(({}) => ({
+const Separator = styled(Box)<ModeProps>(({ mode }) => ({
   width: 2,
   height: '100%',
-  border: '1px solid #FFFFFF',
+  border: `1px solid ${mode === 'light' ? '#3E3E3E' : '#FFFFFF'} `,
   borderRadius: 1,
 }));
 
@@ -122,6 +128,7 @@ const PhoneTextField: VFC<PhoneTextFieldProps> = (props) => {
     error,
     errorMessage,
     popperProps,
+    mode,
     ...otherProps
   } = props;
   const containerDOM = useRef<HTMLDivElement>(null);
@@ -186,23 +193,29 @@ const PhoneTextField: VFC<PhoneTextFieldProps> = (props) => {
         className={classnames({
           'container--error': error,
         })}
+        mode={mode}
         {...otherProps}
       >
-        <ComponentIcPhoneDbg style={{ marginRight: 6 }} />
+        {mode === 'light' ? (
+          <ComponentIcPhoneDbgBlack style={{ marginRight: 6 }} />
+        ) : (
+          <ComponentIcPhoneDbg style={{ marginRight: 6 }} />
+        )}
         <PhoneCode onClick={() => setShowMenu(!showMenu)}>
           <span className="code-text">{`+${selectedCode}`}</span>
           {showMenu ? (
             <KeyboardArrowUp style={{ margin: '0 6px' }} />
           ) : (
             <KeyboardArrowDownIcon style={{ margin: '0 6px' }} />
           )}
-          <Separator />
+          <Separator mode={mode} />
         </PhoneCode>
         <Input
           type="tel"
           placeholder={placeholder}
           value={inputValue}
           onChange={handleInputOnChange}
+          mode={mode}
           {...inputProps}
         />
       </TextField>

src/components/TextField/PhoneTextField/PhoneTextField.types.ts

@@ -1,4 +1,5 @@
 import { BoxProps, InputBaseProps, PopperProps } from '@mui/material';
+import { Mode } from 'components/main.types';
 import { CountryCodeData } from '../../../Theme.types';
 
 export interface phoneData {
@@ -19,4 +20,5 @@ export interface PhoneTextFieldProps extends Omit<BoxProps, 'onChange'> {
   errorMessage?: string;
   inputProps?: InputBaseProps;
   popperProps?: Omit<PopperProps, 'open' | 'anchorEl'>;
+  mode?: Mode;
 }

src/svg/ComponentIcPhoneDbgBlack.tsx

@@ -0,0 +1,38 @@
+import React, { CSSProperties, VFC } from 'react';
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
+
+interface Props {
+  width?: CSSProperties['width'];
+  height?: CSSProperties['height'];
+}
+
+const ComponentIcPhoneDbgBlack: VFC<Props & Omit<SvgIconProps, keyof Props>> = (
+  props,
+) => {
+  const { viewBox = '0 0 40 40', ...otherProps } = props;
+
+  return (
+    <SvgIcon
+      viewBox={viewBox}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      sx={{
+        width: props.width ?? 40,
+        height: props.height ?? 40,
+      }}
+      {...otherProps}
+    >
+      <path
+        d="M26 12L26 28L14 28L14 12L26 12Z"
+        stroke="#3E3E3E"
+        strokeWidth="2"
+        strokeLinejoin="round"
+        fill="none"
+      />
+      <rect x="17" y="24" width="6" height="2" rx="1" fill="#3E3E3E" />
+      {/* <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" /> */}
+    </SvgIcon>
+  );
+};
+
+export default ComponentIcPhoneDbgBlack;