Merge branch 'dev' into feature/#723-gauge-tests-and-change-typography

Author: vcamarzana

index.html

@@ -335,7 +335,6 @@ <h1>
               Share your ideas as low-fidelity mocks in minutes, perfect for
               getting started.
             </p>
-            <p class="community">Community preview</p>
           </div>
           <div>
             <div class="video">

public/assets/omar-lorenzo.jpeg

@@ -49,6 +49,7 @@ export const InputShape = forwardRef<any, ShapeProps>((props, ref) => {
     borderRadius,
     disabled,
     isPlaceholder,
+    isPassword,
   } = useShapeProps(otherProps, INPUT_SHAPE);
 
   const commonGroupProps = useGroupShapeProps(
@@ -58,6 +59,13 @@ export const InputShape = forwardRef<any, ShapeProps>((props, ref) => {
     ref
   );
 
+  const maskPassword = (text: string) => {
+    const maskSymbol = '●';
+    return maskSymbol.repeat(text.length);
+  };
+
+  const finalText = isPassword && !isPlaceholder ? maskPassword(text) : text;
+
   return (
     <Group {...commonGroupProps} {...shapeProps}>
       <Rect
@@ -75,7 +83,7 @@ export const InputShape = forwardRef<any, ShapeProps>((props, ref) => {
         x={INPUT_SHAPE.DEFAULT_PADDING}
         y={INPUT_SHAPE.DEFAULT_PADDING + 1}
         width={width - INPUT_SHAPE.DEFAULT_PADDING * 2}
-        text={text}
+        text={finalText}
         fontFamily={INPUT_SHAPE.DEFAULT_FONT_FAMILY}
         fontSize={INPUT_SHAPE.DEFAULT_FONT_SIZE}
         lineHeight={INPUT_SHAPE.DEFAULT_LINE_HEIGHT}
@@ -93,33 +101,3 @@ export const InputShape = forwardRef<any, ShapeProps>((props, ref) => {
     </Group>
   );
 });
-
-/*
-    <Group {...commonGroupProps} {...shapeProps}>
-      <Rect
-        x={0}
-        y={0}
-        width={restrictedWidth}
-        height={restrictedHeight}
-        cornerRadius={borderRadius}
-        stroke={stroke}
-        dash={strokeStyle}
-        strokeWidth={INPUT_SHAPE.DEFAULT_STROKE_WIDTH}
-        fill={fill}
-      />
-      <Text
-        x={INPUT_SHAPE.DEFAULT_PADDING}
-        y={INPUT_SHAPE.DEFAULT_PADDING + 1}
-        width={width - INPUT_SHAPE.DEFAULT_PADDING * 2}
-        text={text}
-        fontFamily={INPUT_SHAPE.DEFAULT_FONT_FAMILY}
-        fontSize={INPUT_SHAPE.DEFAULT_FONT_SIZE}
-        lineHeight={INPUT_SHAPE.DEFAULT_LINE_HEIGHT}
-        fill={textColor}
-        align="left"
-        ellipsis={true}
-        wrap="none"
-      />
-    </Group>
-
-*/

public/icons/nonfilter.svg

@@ -27,6 +27,11 @@ export const useShapeProps = (
     [otherProps?.isPlaceholder]
   );
 
+  const isPassword = useMemo(
+    () => otherProps?.isPassword ?? true,
+    [otherProps?.isPassword]
+  );
+
   const fontVariant = useMemo(
     () => otherProps?.fontVariant ?? defaultStyleShape.DEFAULT_FONT_VARIANT,
     [otherProps?.fontVariant]
@@ -99,5 +104,6 @@ export const useShapeProps = (
     textAlignment,
     disabled,
     isPlaceholder,
+    isPassword,
   };
 };

src/common/components/mock-components/front-components/input-shape.tsx

@@ -52,6 +52,10 @@ const AddDefaultValuesForInputPropsPlaceHolderAndPassword = (
         ...shape,
         otherProps: {
           ...shape.otherProps,
+          isPassword:
+            shape.otherProps?.isPassword !== undefined
+              ? shape.otherProps?.isPassword
+              : false,
           isPlaceholder:
             // Small update no need to go for 0_3, but input placeHolder needs to have default value
             // if undefined

src/common/components/shapes/use-shape-props.hook.ts

@@ -190,6 +190,7 @@ export interface OtherProps {
   textAlignment?: 'left' | 'center' | 'right';
   disabled?: boolean;
   isPlaceholder?: boolean;
+  isPassword?: boolean;
 }
 
 export const BASE_ICONS_URL = '/icons/';

src/core/local-disk/shapes-to-document.mapper.ts

@@ -9,8 +9,7 @@ export const AboutPod = () => {
     <div className={classes.container}>
       <QuickmockLogoComponent styleClass={classes.projectLogo} />
       <h2 className={classes.projectName}>Quickmock</h2>
-      <p className={classes.projectVersion}>Version 0.0</p>
-      <p className={classes.projectCommunity}>Community preview</p>
+      <p className={classes.projectVersion}>Version 1.0</p>
       <DevelopmentTeamComponent />
     </div>
   );

src/core/model/index.ts

@@ -145,14 +145,21 @@ export const memberList: Member[] = [
   },
   {
     id: '19',
+    name: 'Omar',
+    surname: 'Lorenzo',
+    urlLinkedin: 'https://www.linkedin.com/in/omar-lorenzo-montelongo/',
+    image: './assets/omar-lorenzo.jpeg',
+  },
+  {
+    id: '20',
     name: 'Gabriel',
     surname: 'Ionut',
     urlLinkedin: 'https://www.linkedin.com/in/gabriel-ionut-birsan-b14816307/',
     image: './assets/gabriel-ionut.jpeg',
   },
 
   {
-    id: '20',
+    id: '21',
     name: 'Antonio',
     surname: 'Contreras',
     urlLinkedin:
@@ -161,7 +168,7 @@ export const memberList: Member[] = [
   },
 
   {
-    id: '21',
+    id: '22',
     name: 'Braulio',
     surname: 'Diez',
     urlLinkedin: 'https://www.linkedin.com/in/brauliodiez/',

src/pods/about/about.pod.tsx

@@ -16,6 +16,7 @@ export const generateDefaultOtherProps = (
         backgroundColor: INPUT_SHAPE.DEFAULT_FILL_BACKGROUND,
         textColor: INPUT_SHAPE.DEFAULT_FILL_TEXT,
         isPlaceholder: true,
+        isPassword: false,
         strokeStyle: [],
         borderRadius: `${INPUT_SHAPE.DEFAULT_CORNER_RADIUS}`,
         disabled: INPUT_SHAPE.DEFAULT_DISABLED,