@jsenv/navi 0.9.2 → 0.10.0

package/src/components/text/text.jsx

@@ -24,25 +24,36 @@ import.meta.css = /* css */ `
   }
 `;
 
-export const Text = ({
-  color,
-  bold,
-  italic,
-  underline,
-  size,
-  style,
-  children,
-  ...rest
-}) => {
+export const useTypographyStyle = (props) => {
+  const color = props.color;
+  const bold = props.bold;
+  const italic = props.italic;
+  const underline = props.underline;
+  const size = props.size;
+  delete props.color;
+  delete props.bold;
+  delete props.italic;
+  delete props.underline;
+  delete props.size;
+  return {
+    color,
+    fontWeight: bold ? "bold" : bold === undefined ? undefined : "normal",
+    fontStyle: italic ? "italic" : italic === undefined ? undefined : "normal",
+    fontSize: size,
+    textDecoration: underline
+      ? "underline"
+      : underline === undefined
+        ? undefined
+        : "none",
+  };
+};
+
+export const Text = ({ style, children, ...rest }) => {
   const { all } = useLayoutStyle(rest);
   const innerStyle = withPropsStyle(
     {
       ...all,
-      color,
-      fontWeight: bold ? "bold" : undefined,
-      fontStyle: italic ? "italic" : undefined,
-      fontSize: size,
-      textDecoration: underline ? "underline" : undefined,
+      ...useTypographyStyle(rest),
     },
     style,
   );
@@ -54,13 +65,12 @@ export const Text = ({
   );
 };
 
-export const Icon = ({ color, size, style, children, ...rest }) => {
+export const Icon = ({ style, children, ...rest }) => {
   const { all } = useLayoutStyle(rest);
   const innerStyle = withPropsStyle(
     {
       ...all,
-      color,
-      fontSize: size,
+      ...useTypographyStyle(rest),
     },
     style,
   );

package/src/validation/constraints/native_constraints.js

@@ -71,10 +71,25 @@ export const REQUIRED_CONSTRAINT = {
           : undefined,
       };
     }
-    if (!element.value) {
-      return requiredMessage || `Veuillez remplir ce champ.`;
+    if (element.value) {
+      return null;
     }
-    return null;
+    if (requiredMessage) {
+      return requiredMessage;
+    }
+    if (element.type === "password") {
+      return element.hasAttribute("data-same-as")
+        ? `Veuillez confirmer le mot de passe.`
+        : `Veuillez saisir un mot de passe.`;
+    }
+    if (element.type === "email") {
+      return element.hasAttribute("data-same-as")
+        ? `Veuillez confirmer l'adresse e-mail`
+        : `Veuillez saisir une adresse e-mail.`;
+    }
+    return element.hasAttribute("data-same-as")
+      ? `Veuillez confirmer le champ précédent`
+      : `Veuillez remplir ce champ.`;
   },
 };
 export const PATTERN_CONSTRAINT = {
@@ -89,19 +104,19 @@ export const PATTERN_CONSTRAINT = {
       return null;
     }
     const regex = new RegExp(pattern);
-    if (!regex.test(value)) {
-      const patternMessage = input.getAttribute("data-pattern-message");
-      if (patternMessage) {
-        return patternMessage;
-      }
-      let message = `Veuillez respecter le format requis.`;
-      const title = input.title;
-      if (title) {
-        message += `<br />${title}`;
-      }
-      return message;
+    if (regex.test(value)) {
+      return null;
     }
-    return null;
+    const patternMessage = input.getAttribute("data-pattern-message");
+    if (patternMessage) {
+      return patternMessage;
+    }
+    let message = `Veuillez respecter le format requis.`;
+    const title = input.title;
+    if (title) {
+      message += `<br />${title}`;
+    }
+    return message;
   },
 };
 // https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/email#validation
@@ -149,10 +164,11 @@ export const MIN_LENGTH_CONSTRAINT = {
       return null;
     }
     if (valueLength < minLength) {
+      const thisField = generateThisFieldText(element);
       if (valueLength === 1) {
-        return `Ce champ doit contenir au moins ${minLength} caractère (il contient actuellement un seul caractère).`;
+        return `${thisField} doit contenir au moins ${minLength} caractère (il contient actuellement un seul caractère).`;
       }
-      return `Ce champ doit contenir au moins ${minLength} caractères (il contient actuellement ${valueLength} caractères).`;
+      return `${thisField} doit contenir au moins ${minLength} caractères (il contient actuellement ${valueLength} caractères).`;
     }
     return null;
   },
@@ -166,6 +182,14 @@ const INPUT_TYPE_SUPPORTING_MIN_LENGTH_SET = new Set([
   "password",
 ]);
 
+const generateThisFieldText = (field) => {
+  return field.type === "password"
+    ? "Ce mot de passe"
+    : field.type === "email"
+      ? "Cette adresse e-mail"
+      : "Ce champ";
+};
+
 export const MAX_LENGTH_CONSTRAINT = {
   name: "max_length",
   check: (element) => {
@@ -185,7 +209,8 @@ export const MAX_LENGTH_CONSTRAINT = {
     const value = element.value;
     const valueLength = value.length;
     if (valueLength > maxLength) {
-      return `Ce champ doit contenir au maximum ${maxLength} caractères (il contient actuellement ${valueLength} caractères).`;
+      const thisField = generateThisFieldText(element);
+      return `${thisField} doit contenir au maximum ${maxLength} caractères (il contient actuellement ${valueLength} caractères).`;
     }
     return null;
   },

package/src/validation/constraints/same_as_constraint.js

@@ -0,0 +1,42 @@
+export const SAME_AS_CONSTRAINT = {
+  name: "same_as",
+  check: (element) => {
+    const sameAs = element.getAttribute("data-same-as");
+    if (!sameAs) {
+      return null;
+    }
+
+    const otherElement = document.querySelector(sameAs);
+    if (!otherElement) {
+      console.warn(
+        `Same as constraint: could not find element for selector ${sameAs}`,
+      );
+      return null;
+    }
+
+    const value = element.value;
+    const otherValue = otherElement.value;
+    if (value === "" || otherValue === "") {
+      // don't validate if one of the two values is empty
+      return null;
+    }
+
+    if (value === otherValue) {
+      return null;
+    }
+
+    const message = element.getAttribute("data-same-as-message");
+    if (message) {
+      return message;
+    }
+
+    const type = element.type;
+    if (type === "password") {
+      return `Ce mot de passe doit être identique au précédent.`;
+    }
+    if (type === "email") {
+      return `Cette adresse e-mail doit être identique a la précédente.`;
+    }
+    return `Ce champ doit être identique au précédent.`;
+  },
+};