feat: message documentation (#554)

* convert to markdown * add examples + properties * convert to markdown * add examples + properties * added help examples + props * remove brs * fix examples * update params * amendsd prop descriptions * remove njk trim/indents * reorder example props Co-authored-by: Catia Costa <[email protected]> Co-authored-by: Dayle Salmon <[email protected]>
wmcadigital · Jan 14, 2021 · adc7037 · adc7037
1 parent 05bd895
commit adc7037
Show file tree

Hide file tree

Showing 11 changed files with 334 additions and 177 deletions.
diff --git a/src/wmnds/components/content-tiles/travel-updates/travel-updates.njk b/src/wmnds/components/content-tiles/travel-updates/travel-updates.njk
@@ -168,9 +168,9 @@
    </div>
    {% from "wmnds/components/message/help/_help.njk" import wmndsMsgHelp %}
    {{
-   wmndsMsgHelp({
-   message: 'Save bus routes to your homepage by pressing the star icon'
-   })
-      }}
+      wmndsMsgHelp({
+         contentText: 'Save bus routes to your homepage by pressing the star icon'
+      })
+   }}
 </div>
 {% endmacro %}
diff --git a/src/wmnds/components/message/help/_example.njk b/src/wmnds/components/message/help/_example.njk
@@ -0,0 +1,11 @@
+{% raw %}
+{% from "wmnds/components/message/summary/_summary.njk" import wmndsMsgHelp %}
+
+{{
+   wmndsMsgHelp({
+      contentText: "Details added what happened and what to do next. Lorem ipsum lorem ipsum. Lorem ipsum lorem ipsum text.",
+      contentHTML: null,
+      dismissable: false
+    })
+}}
+{% endraw %}
diff --git a/src/wmnds/components/message/help/_help.njk b/src/wmnds/components/message/help/_help.njk
@@ -1,18 +1,22 @@
 {% macro wmndsMsgHelp(params) %}
 {% from "wmnds/components/icon/_icon.njk" import wmndsIcon %}
-{# Set vars and defaults #}
+{# Set content #}
+{% set _content = params.contentHTML | safe if params.contentHTML else params.contentText %}
+{% set dismissable = params.dismissable if params.dismissable === false else true %}
 
 <div class="wmnds-msg-help">
+{% if dismissable %}
   <button class="wmnds-msg-help__close-btn" aria-label="Close help message">
     {# Get SVG icon #}
     {{-
       wmndsIcon({
         icon: 'general-cross',
         class: 'wmnds-msg-help__close-icon'
-      }) | indent(4) | trim
+      })
     }}
   </button>
-  {{ params.message | safe }}
+  {% endif %}
+  {{ _content }}
 </div>
 
 {% endmacro %}
diff --git a/src/wmnds/components/message/help/_properties.njk.json b/src/wmnds/components/message/help/_properties.njk.json
@@ -0,0 +1,19 @@
+{
+  "wmndsMsgHelpProps": [
+    {
+      "name": "contentText",
+      "type": "string",
+      "description": "<strong>Required.</strong> The text that displays in the help message component. You can use any string with this option. If you set <code class='wmnds-website-inline-code'>contentHTML</code>, this option is not required and is ignored."
+    },
+    {
+      "name": "contentHTML",
+      "type": "string",
+      "description": "<strong>Required.</strong> The HTML to use within the help message component. You can use any string with this option. If you set <code class='wmnds-website-inline-code'>contentHTML</code>, <code class='wmnds-website-inline-code'>contentText</code> is not required and is ignored."
+    },
+    {
+      "name": "dismissable",
+      "type": "boolean",
+      "description": "If dismissable is set to true, the component will display a close icon. Defaults to <code class='wmnds-website-inline-code'>true</code>"
+    }
+  ]
+}
diff --git a/src/wmnds/components/message/summary/_example.njk b/src/wmnds/components/message/summary/_example.njk
@@ -0,0 +1,15 @@
+{% raw %}
+{% from "wmnds/components/message/summary/_summary.njk" import wmndsMsgSummary %}
+
+{{
+   wmndsMsgSummary({
+      type: "info",
+      title: "Information about XXXXXXXXX was successfully updated!",
+      subtitle: null,
+      contentText: "Details added what happened and what to do next. Lorem ipsum lorem ipsum. Lorem ipsum lorem ipsum text.",
+      contentHTML: null,
+      dismissable: false,
+      classes: null
+    })
+}}
+{% endraw %}
diff --git a/src/wmnds/components/message/summary/_properties.njk.json b/src/wmnds/components/message/summary/_properties.njk.json
@@ -0,0 +1,39 @@
+{
+  "wmndsMsgSummaryProps": [
+    {
+      "name": "type",
+      "type": "string",
+      "description": "Type of the message component. As default it is <code class='wmnds-website-inline-code'>info</code>. Available types: <code class='wmnds-website-inline-code'>info</code>, <code class='wmnds-website-inline-code'>success</code>, <code class='wmnds-website-inline-code'>success-fill-no-icon</code>, <code class='wmnds-website-inline-code'>warning</code>, <code class='wmnds-website-inline-code'>error</code>"
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "description": "The title text for the message displayed as <code class='wmnds-website-inline-code'>h3</code>."
+    },
+    {
+      "name": "subtitle",
+      "type": "string",
+      "description": "The subtitle text for the message."
+    },
+    {
+      "name": "contentText",
+      "type": "string",
+      "description": "<strong>Required.</strong> The text that displays in the message component. You can use any string with this option. If you set <code class='wmnds-website-inline-code'>contentHTML</code>, this option is not required and is ignored."
+    },
+    {
+      "name": "contentHTML",
+      "type": "string",
+      "description": "<strong>Required.</strong> The HTML to use within the message component. You can use any string with this option. If you set <code class='wmnds-website-inline-code'>contentHTML</code>, <code class='wmnds-website-inline-code'>contentText</code> is not required and is ignored."
+    },
+    {
+      "name": "dismissable",
+      "type": "boolean",
+      "description": "If dismissable is set to true, the component will display a close icon."
+    },
+    {
+      "name": "classes",
+      "type": "string",
+      "description": "Classes to add to the summary container."
+    }
+  ]
+}
diff --git a/src/wmnds/components/message/summary/_summary.njk b/src/wmnds/components/message/summary/_summary.njk
@@ -21,6 +21,8 @@
 {% endif %}
 {# Set classes #}
 {% set classes = " " + params.classes if params.classes %}
+{# Set content #}
+{% set _content = params.contentHTML | safe if params.contentHTML else params.contentText %}
 {% from "wmnds/components/icon/_icon.njk" import wmndsIcon %}
 
 <div class="wmnds-msg-summary wmnds-msg-summary--{{ params.type }} {{ classes }}">
@@ -45,7 +47,7 @@
     {% endif %}
   </div>
   <div class="wmnds-msg-summary__info">
-    {{ params.message | safe }}
+    {{ _content }}
   </div>
 </div>
 {% endmacro %}
diff --git a/src/wmnds/patterns/content-cards/travel-updates/_travel-updates.njk b/src/wmnds/patterns/content-cards/travel-updates/_travel-updates.njk
@@ -18,11 +18,11 @@
         <div class="wmnds-m-t-sm">
             {{
                 largeDisruption({
-                strongText: area,
-                text: "Usual traffic",
-                iconLeft: "modes-isolated-roads",
-                iconRight: "general-success"
-                }) | trim | indent(8)
+                    strongText: area,
+                    text: "Usual traffic",
+                    iconLeft: "modes-isolated-roads",
+                    iconRight: "general-success"
+                })
             }}
         </div>
         {% endfor %}
@@ -34,11 +34,11 @@
             <div class="wmnds-col-auto wmnds-m-r-md">
                 {{
                     mediumDisruption({
-                    text: bus,
-                    classModifiers: "wmnds-disruption-indicator-medium--success wmnds-disruption-indicator-medium--narrow-travel-updates wmnds-disruption-indicator-medium--narrow-travel-updates-bus",
-                    iconLeft: "modes-isolated-bus",
-                    iconRight: "general-success"
-                    }) | trim | indent(12)
+                        text: bus,
+                        classModifiers: "wmnds-disruption-indicator-medium--success wmnds-disruption-indicator-medium--narrow-travel-updates wmnds-disruption-indicator-medium--narrow-travel-updates-bus",
+                        iconLeft: "modes-isolated-bus",
+                        iconRight: "general-success"
+                    })
                 }}
                 <div class="wmnds-grid wmnds-grid--justify-around wmnds-p-t-sm wmnds-p-b-sm">
                     <svg class="wmnds-disruption-indicator-medium-star">
@@ -51,8 +51,8 @@
         <!-- Help message -->
         {{
             wmndsMsgHelp({
-                message: 'Save bus routes to your homepage by pressing the star icon'
-            }) | indent(12) | trim
+                contentText: 'Save bus routes to your homepage by pressing the star icon'
+            })
         }}
     </div>
 {% endcall %}

diff --git a/src/wmnds/patterns/question/confirmation-message/_confirmation-message.njk b/src/wmnds/patterns/question/confirmation-message/_confirmation-message.njk
@@ -2,14 +2,14 @@
 
 {% from "wmnds/components/message/summary/_summary.njk" import wmndsMsgSummary %}
 
-{{-
+{{
     wmndsMsgSummary({
         type: 'success-fill-no-icon',
         title: 'Request complete',
         subtitle: 'You can now start using your Swift card',
-        message: 'Your reference number is <b>12345</b>',
+        contentHTML: 'Your reference number is <b>12345</b>',
         classes: 'wmnds-text-align-center'
-    }) | trim 
--}}
+    })
+}}
 
 {% endmacro %}
diff --git a/src/www/pages/components/message/index.njk b/src/www/pages/components/message/index.njk