Merge pull request #698 from Lemoncode/feature/#692add-a-placeholder-property-to-input-mock-shape

Feature/#692add a placeholder property to input mock shape

Author: brauliodiez

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

@@ -41,8 +41,15 @@ export const InputShape = forwardRef<any, ShapeProps>((props, ref) => {
 
   const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
 
-  const { stroke, fill, textColor, strokeStyle, borderRadius, disabled } =
-    useShapeProps(otherProps, INPUT_SHAPE);
+  const {
+    stroke,
+    fill,
+    textColor,
+    strokeStyle,
+    borderRadius,
+    disabled,
+    isPlaceholder,
+  } = useShapeProps(otherProps, INPUT_SHAPE);
 
   const commonGroupProps = useGroupShapeProps(
     props,
@@ -72,7 +79,13 @@ export const InputShape = forwardRef<any, ShapeProps>((props, ref) => {
         fontFamily={INPUT_SHAPE.DEFAULT_FONT_FAMILY}
         fontSize={INPUT_SHAPE.DEFAULT_FONT_SIZE}
         lineHeight={INPUT_SHAPE.DEFAULT_LINE_HEIGHT}
-        fill={disabled ? DISABLED_COLOR_VALUES.DEFAULT_TEXT_COLOR : textColor}
+        fill={
+          disabled
+            ? DISABLED_COLOR_VALUES.DEFAULT_TEXT_COLOR
+            : isPlaceholder
+              ? '#8c8c8c'
+              : textColor
+        }
         align="left"
         ellipsis={true}
         wrap="none"

src/common/components/mock-components/front-components/shape.const.ts

@@ -8,7 +8,7 @@ const DEFAULT_FONT_SIZE = 16;
 const DEFAULT_FILL_TEXT = '#000000';
 const DEFAULT_PADDING = 10;
 const DEFAULT_LINE_HEIGHT = 1.25;
-const DEFAULT_FILL_TEXT_INPUT = '#8c8c8c';
+const DEFAULT_FILL_TEXT_INPUT = '#000000';
 const DEFAULT_FONT_SIZE_INPUT = 15;
 const DEFAULT_TEXT_WIDTH = 165;
 const DEFAULT_TEXT_HEIGHT = 38;

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

@@ -22,6 +22,11 @@ export const useShapeProps = (
     [otherProps?.textColor]
   );
 
+  const isPlaceholder = useMemo(
+    () => otherProps?.isPlaceholder ?? true,
+    [otherProps?.isPlaceholder]
+  );
+
   const fontVariant = useMemo(
     () => otherProps?.fontVariant ?? defaultStyleShape.DEFAULT_FONT_VARIANT,
     [otherProps?.fontVariant]
@@ -93,5 +98,6 @@ export const useShapeProps = (
     textDecoration,
     textAlignment,
     disabled,
+    isPlaceholder,
   };
 };

src/core/model/index.ts

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

src/pods/canvas/model/shape-other-props.utils.ts

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

src/pods/properties/components/password/index.ts

@@ -0,0 +1 @@
+export * from './password.component';

src/pods/properties/components/password/password.component.module.css

@@ -0,0 +1,17 @@
+.container {
+  display: flex;
+  gap: 0.5em;
+  align-items: center;
+  padding: var(--space-xs) var(--space-md);
+  border-bottom: 1px solid var(--primary-300);
+}
+
+.container :first-child {
+  flex: 1;
+}
+
+.checkbox {
+  width: var(--space-md);
+  height: var(--space-md);
+  cursor: pointer;
+}

src/pods/properties/components/password/password.component.tsx

@@ -0,0 +1,23 @@
+import classes from './password.component.module.css';
+
+interface Props {
+  label: string;
+  isPassword: boolean;
+  onChange: (isPassword: boolean) => void;
+}
+
+export const Password: React.FC<Props> = props => {
+  const { label, isPassword, onChange } = props;
+
+  return (
+    <div className={classes.container}>
+      <p>{label}</p>
+      <input
+        type="checkbox"
+        checked={isPassword}
+        onChange={() => onChange(!isPassword)}
+        className={classes.checkbox}
+      />
+    </div>
+  );
+};

src/pods/properties/components/placeholder/index.ts

@@ -0,0 +1 @@
+export * from './placeholder.component';

src/pods/properties/components/placeholder/placeholder.component.module.css

@@ -0,0 +1,17 @@
+.container {
+  display: flex;
+  gap: 0.5em;
+  align-items: center;
+  padding: var(--space-xs) var(--space-md);
+  border-bottom: 1px solid var(--primary-300);
+}
+
+.container :first-child {
+  flex: 1;
+}
+
+.checkbox {
+  width: var(--space-md);
+  height: var(--space-md);
+  cursor: pointer;
+}