Update Password block to enable having something else than 'your password must contain as hint'

Author: garronej

.storybook/DocsContainer.js

@@ -31,7 +31,7 @@ export const DocsContainer = ({ children, context }) => {
         <>
             <style>{`
                 body {
-                    padding: 0 !important,
+                    padding: 0 !important;
                     background-color: ${backgroundColor};
                 }
 

src/blocks/PasswordInput.tsx

@@ -19,6 +19,8 @@ export type PasswordInputProps = Omit<
     "state" | "stateRelatedMessage" | "iconId" | "classes"
 > & {
     classes?: Partial<Record<"root" | "input" | "label" | "checkbox", string>>;
+    /** Default "Your password must contain:", if empty string the hint wont be displayed */
+    messagesHint?: ReactNode;
     messages?: {
         severity: PasswordInputProps.Severity;
         message: ReactNode;
@@ -41,6 +43,8 @@ export namespace PasswordInputProps {
  * */
 export const PasswordInput = memo(
     forwardRef<HTMLDivElement, PasswordInputProps>((props, ref) => {
+        const { t } = useTranslation();
+
         const {
             className,
             label,
@@ -51,13 +55,12 @@ export const PasswordInput = memo(
             style,
             messages = [],
             nativeInputProps,
+            messagesHint = t("your password must contain"),
             ...rest
         } = props;
 
         assert<Equals<keyof typeof rest, never>>();
 
-        const { t } = useTranslation();
-
         const inputId = (function useClosure() {
             const id = useId();
 
@@ -113,9 +116,11 @@ export const PasswordInput = memo(
                         id={messagesGroupId}
                         aria-live="assertive"
                     >
-                        <p className={fr.cx("fr-message")} id={messageGroupId}>
-                            {t("your password must contain")}
-                        </p>
+                        {messagesHint !== "" && (
+                            <p className={fr.cx("fr-message")} id={messageGroupId}>
+                                {messagesHint}
+                            </p>
+                        )}
                         {messages.map(({ severity, message }, index) => (
                             <p
                                 key={index}

stories/blocks/PasswordInput.stories.tsx

@@ -13,11 +13,15 @@ const { meta, getStory } = getStoryFactory({
         "disabled": {
             "control": { "type": "boolean" }
         },
-
         "nativeInputProps": {
             "description": `An object that is forwarded as props to te underlying native \`<input />\` element.  
             This is where you pass the \`name\` prop or \`onChange\` for example.`,
             "control": { "type": null }
+        },
+        "messagesHint": {
+            "description": `The text that is displayed before the list of messages. 
+            Default to "Your password must contain:" (internationalized).
+            If you pass an empty string, the hint block wont be displayed.`
         }
     },
     "doHideImportInstruction": true