ASL-4474 - Provide context for templates in fieldset and model summar…

…y snippets (#324)

* [ASL-4474] Allow passing data for mustache templates when rendering field labels, hints and errors.

* [ASL-4474] Add snippet context to model summary

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ukhomeoffice/asl-components",
-  "version": "13.0.0",
+  "version": "13.1.0",
   "description": "React components for ASL layouts and elements",
   "main": "src/index.jsx",
   "styles": "styles/index.scss",

src/fieldset/index.jsx

@@ -224,10 +224,12 @@ function Field({
         hint = <Markdown unwrapSingleLine={true}>{ hint }</Markdown>;
     }
 
+    const snippetProps = props.formatters?.[name]?.renderContext ?? {};
+
     return <Component
-        label={isUndefined(label) ? <Snippet>{`fields.${name}.label`}</Snippet> : label}
-        hint={isUndefined(hint) ? <Snippet optional>{`fields.${name}.hint`}</Snippet> : hint}
-        error={error && <Snippet fallback={`errors.default.${error}`}>{`errors.${name}.${error}`}</Snippet>}
+        label={isUndefined(label) ? <Snippet {...snippetProps}>{`fields.${name}.label`}</Snippet> : label}
+        hint={isUndefined(hint) ? <Snippet optional {...snippetProps}>{`fields.${name}.hint`}</Snippet> : hint}
+        error={error && <Snippet fallback={`errors.default.${error}`} {...snippetProps}>{`errors.${name}.${error}`}</Snippet>}
         value={fieldValue}
         onChange={onFieldChange}
         name={prefix ? `${prefix}-${name}` : name}

src/model-summary/index.jsx

@@ -29,9 +29,10 @@ const ModelSummary = ({ model, schema, formatters = {}, className, formatNullVal
             {
                 map(fields, (item, key) => {
                     const options = schema[key] || {};
+                    const snippetProps = formatters[key]?.renderContext ?? {};
                     return (
                         <Fragment key={key}>
-                            <dt><Snippet>{`fields.${key}.label`}</Snippet></dt>
+                            <dt><Snippet {...snippetProps}>{`fields.${key}.label`}</Snippet></dt>
                             <dd>
                                 <Value
                                     value={model[key]}