Adding icon param to screens fragments 🍖 (#518)

Co-authored-by: Chibuisi Enyia <[email protected]>
codeforamerica · Feb 22, 2024 · 5894b6e · 5894b6e
1 parent e1a8581
commit 5894b6e
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 3 deletions.
diff --git a/intellij-settings/LiveTemplates.xml b/intellij-settings/LiveTemplates.xml
@@ -241,17 +241,19 @@
   <option name="HTML" value="true" />
 </context>
 </template>
-<template name="cfa:screenWithOneInput" value="&lt;th:block&#10;  th:replace=&quot;~{fragments/screens/screenWithOneInput ::&#10;  screenWithOneInput(&#10;    title=#{$TITLE$},&#10;    header=#{$HEADER$},&#10;    subtext=#{$SUBTEXT$},&#10;    formAction=${formAction},&#10;    inputContent=~{::inputContent})}&quot;&gt;&#10;  &lt;th:block th:ref=&quot;inputContent&quot;&gt;&#10;    &lt;!-- Be sure to have `ariaLabel='header'` to label the input with the header --&gt;&#10;    &lt;th:block th:replace=&quot;~{fragments/inputs/text ::&#10;      text(inputName='$INPUT_NAME$',&#10;      ariaLabel='header')}&quot;/&gt;&#10;  &lt;/th:block&gt;&#10;&lt;/th:block&gt;" description="An entire screen that has one input and is labelled by the page header." toReformat="false" toShortenFQNames="true">
+<template name="cfa:screenWithOneInput" value="&lt;th:block&#10;  th:replace=&quot;~{fragments/screens/screenWithOneInput ::&#10;  screenWithOneInput(&#10;    title=#{$TITLE$},&#10;    iconFragment=~{fragments/icons :: $ICON_NAME$},&#10;    header=#{$HEADER$},&#10;    subtext=#{$SUBTEXT$},&#10;    formAction=${formAction},&#10;    inputContent=~{::inputContent})}&quot;&gt;&#10;  &lt;th:block th:ref=&quot;inputContent&quot;&gt;&#10;    &lt;!-- Be sure to have `ariaLabel='header'` to label the input with the header --&gt;&#10;    &lt;th:block th:replace=&quot;~{fragments/inputs/text ::&#10;      text(inputName='$INPUT_NAME$',&#10;      ariaLabel='header')}&quot;/&gt;&#10;  &lt;/th:block&gt;&#10;&lt;/th:block&gt;" description="An entire screen that has one input and is labelled by the page header." toReformat="false" toShortenFQNames="true">
 <variable name="TITLE" expression="" defaultValue="" alwaysStopAt="true" />
+<variable name="ICON_NAME" expression="" defaultValue="" alwaysStopAt="true" />
 <variable name="HEADER" expression="" defaultValue="" alwaysStopAt="true" />
 <variable name="SUBTEXT" expression="" defaultValue="" alwaysStopAt="true" />
 <variable name="INPUT_NAME" expression="" defaultValue="" alwaysStopAt="true" />
 <context>
   <option name="HTML" value="true" />
 </context>
 </template>
-<template name="cfa:screenWithYesAndNoButtons" value="&lt;th:block&#10;  th:replace=&quot;~{fragments/screens/screenWithYesAndNoButtons ::&#10;  screenWithYesAndNoButtons(&#10;    title=#{$TITLE$},&#10;    header=#{$HEADER$},&#10;    subtext=#{$SUBTEXT$},&#10;    formAction=${formAction},&#10;    inputName=${inputName},&#10;    inputContent=~{::inputContent})}&quot;&gt;&#10;  &lt;th:block th:ref=&quot;inputContent&quot;&gt;&#10;    &lt;!-- Be sure to have `ariaLabel='header'` to label the input with the header --&gt;&#10;  &lt;/th:block&gt;&#10;&lt;/th:block&gt;" description="An entire screen that has two buttons ('Yes' and 'No') and is labelled by the page header." toReformat="false" toShortenFQNames="true">
+<template name="cfa:screenWithYesAndNoButtons" value="&lt;th:block&#10;  th:replace=&quot;~{fragments/screens/screenWithYesAndNoButtons ::&#10;  screenWithYesAndNoButtons(&#10;    title=#{$TITLE$},&#10;    iconFragment=~{fragments/icons :: $ICON_NAME$},&#10;    header=#{$HEADER$},&#10;    subtext=#{$SUBTEXT$},&#10;    formAction=${formAction},&#10;    inputName=${inputName},&#10;    inputContent=~{::inputContent})}&quot;&gt;&#10;  &lt;th:block th:ref=&quot;inputContent&quot;&gt;&#10;    &lt;!-- Be sure to have `ariaLabel='header'` to label the input with the header --&gt;&#10;  &lt;/th:block&gt;&#10;&lt;/th:block&gt;" description="An entire screen that has two buttons ('Yes' and 'No') and is labelled by the page header." toReformat="false" toShortenFQNames="true">
 <variable name="TITLE" expression="" defaultValue="" alwaysStopAt="true" />
+<variable name="ICON_NAME" expression="" defaultValue="" alwaysStopAt="true" />
 <variable name="HEADER" expression="" defaultValue="" alwaysStopAt="true" />
 <variable name="SUBTEXT" expression="" defaultValue="" alwaysStopAt="true" />
 <context>

diff --git a/src/main/resources/templates/fragments/screens/screenWithOneInput.html b/src/main/resources/templates/fragments/screens/screenWithOneInput.html
@@ -1,6 +1,7 @@
 <th:block
     th:fragment="screenWithOneInput"
     th:with="
+      hasIconFragment=${!#strings.isEmpty(iconFragment)},
       hasIconName=${!#strings.isEmpty(iconName)}"
     th:assert="
       ${!#strings.isEmpty(title)},
@@ -17,7 +18,8 @@
       <div class="grid">
         <div th:replace="~{fragments/goBack :: goBackLink}"></div>
         <main id="content" role="main" class="form-card spacing-above-35">
-          <th:block th:replace="${hasIconName} ? ~{'fragments/icons' :: ${iconName}} : _" />
+          <th:block th:replace="${hasIconName} ? ~{'fragments/icons' :: ${iconName}} : _"/>
+          <th:block th:replace="${hasIconFragment} ? ${iconFragment} : _"/>
           <th:block
               th:replace="~{fragments/cardHeader :: cardHeader(header=${header}, subtext=${subtext})}"/>
           <th:block

diff --git a/src/main/resources/templates/fragments/screens/screenWithYesAndNoButtons.html b/src/main/resources/templates/fragments/screens/screenWithYesAndNoButtons.html
@@ -3,6 +3,7 @@
     th:with="
       hasHelpText=${!#strings.isEmpty(helpText)},
       hasAriaDescribe=${!#strings.isEmpty(ariaDescribe)},
+      hasIconFragment=${!#strings.isEmpty(iconFragment)},
       hasIconName=${!#strings.isEmpty(iconName)}"
     th:assert="
       ${!#strings.isEmpty(title)},
@@ -21,6 +22,7 @@
         <div th:replace="~{fragments/goBack :: goBackLink}"></div>
         <main id="content" role="main" class="form-card spacing-above-35">
           <th:block th:replace="${hasIconName} ? ~{'fragments/icons' :: ${iconName}} : _"/>
+          <th:block th:replace="${hasIconFragment} ? ${iconFragment} : _"/>
           <th:block
               th:replace="~{fragments/cardHeader :: cardHeader(header=${header})}"/>
           <th:block