Merge pull request #210 from andersonjeccel/protip

[UX] ProTip

Author: RCheesley

.github/styles/config/vocabularies/Mautic/accept.txt

@@ -111,6 +111,8 @@ Plugin
 Plugins
 post
 POST
+ProTip
+ProTips
 PUT
 PyCharm
 Rackspace

docs/design/protip.rst

@@ -0,0 +1,37 @@
+ProTip template to enhancing user experience
+############################################
+
+The ProTip template is a powerful feature that displays helpful tips to Users, guiding them on how to use the platform like a pro. This template uses Twig. Here's how this template works and how to effectively use it in Mautic.
+
+Twig template for ProTips
+*************************
+
+The ProTip template conditionally renders a tip when provided. Here's a breakdown of its key components:
+
+.. code-block:: twig
+
+    {% if tip is defined and tip is not empty %}
+    <div class="col-xs-12 ai-center mt-md mb-md">
+        <div class="text-muted">
+            <i class="ri-lightbulb-line ri-lg"></i>
+            <span class="fw-b">{{ 'mautic.core.protip'|trans }}</span>
+            {{ tip|trans|raw }}
+        </div>
+    </div>
+    {% endif %}
+
+This template checks for the definition of a ``tip`` variable. If defined, it renders a div containing the tip. Mautic displays the tip with a bulb icon, a "ProTip" label - a translatable string - and the tip content itself.
+
+The ``tip`` parameter's passed through Twig's ``trans`` filter, allowing for internationalization. The ``raw`` filter's also applied, enabling the use of HTML tags within the tip content. This is particularly useful for including elements like ``<kbd>`` tags to highlight keyboard shortcuts.
+
+To include a ProTip in Mautic, use the following syntax:
+
+.. code-block:: twig
+
+    {{ include('@MauticCore/Helper/protip.html.twig', {tip: 'mautic.core.protip.contacts.view'}) }}
+
+In this example, it includes the ProTip template and passes a translation key - ``mautic.core.protip.contacts.view`` - as the tip content. This specific tip informs Users about using the ``V`` key to switch between card and table views.
+
+The use of a translation key instead of a hard-coded string allows for easy localization of tips. It also promotes consistency across Mautic, as it's possible to reuse the same tip in multiple places by referencing its key.
+
+Use the ProTip template to enhance the user experience of Mautic. These tips provide contextual help, highlighting shortcuts and features that Users might otherwise overlook. It's important to keep tips concise, relevant, and actionable to maximize their effectiveness in guiding Users to become 'Power Users'.

docs/index.rst

@@ -61,6 +61,7 @@ There are several ways to support Mautic other than contributing with code.
    design/feedback
    design/labelling
    design/notifications
+   design/protip
    design/quick_filters
    design/retrieving_system_information
    design/tiles