feat: add banner documentation (#899)

* fix button alignment * add banner documentation
wmcadigital · Dec 1, 2021 · 3c23fb2 · 3c23fb2
1 parent 47ecf9b
commit 3c23fb2
Show file tree

Hide file tree

Showing 7 changed files with 100 additions and 14 deletions.
diff --git a/src/wmnds/assets/sass/styles/wmnds-grid/_wmnds-grid.scss b/src/wmnds/assets/sass/styles/wmnds-grid/_wmnds-grid.scss
@@ -22,12 +22,15 @@
     align-content: flex-start;
 
     & > [class*="wmnds-col-"] {
-      display: inline-block;
       zoom: 1;
       letter-spacing: normal;
       word-spacing: normal;
       text-rendering: auto;
       vertical-align: top;
+
+      &:not(.wmnds-btn) {
+        display: inline-block;
+      }
     }
   }
 }

diff --git a/src/wmnds/components/button/_button.scss b/src/wmnds/components/button/_button.scss
@@ -20,7 +20,7 @@ $btn-transition: ease-in-out background-color 0.2s, ease-in-out border 0.2s;
   text-decoration: none;
   cursor: pointer;
   align-items: center;
-  justify-content: space-between;
+  justify-content: center;
 
   &:hover {
     background-color: get-color(cta, 30, dark);

diff --git a/src/wmnds/components/phase-indicator/_phase-indicator.njk b/src/wmnds/components/phase-indicator/_phase-indicator.njk
@@ -1,5 +1,7 @@
 {% macro wmndsPhaseIndicator(params) %}
 
+{% set indicatorText = params.indicatorText if params.indicatorText else "Beta" %}
+
 <span class="wmnds-phase-indicator" >
   Beta
 </span>

diff --git a/src/wmnds/patterns/banner/_banner.njk b/src/wmnds/patterns/banner/_banner.njk
@@ -5,8 +5,11 @@
 {% from "wmnds/components/icon/_icon.njk" import wmndsIcon %}
 
 {# Set vars #}
-{% set link = params.link if params.link %} {# set button text #}
-{% set linkTitle = params.linkTitle if params.linkTitle %} {# set button text #}
+{% set link = params.link if params.link %}
+{% set linkTitle = params.linkTitle if params.linkTitle %}
+{% set contentText = params.contentText if params.contentText else "This is a new service - your feedback will help us to improve it." %}
+{% set contentHTML = params.contentHTML if params.contentHTML else null %}
+{% set _content = contentHTML | safe if contentHTML else contentText %} {# change content based on what user has input #}
 {# Emergency vars #}
 {% set emergencyModifier = " wmnds-banner-container--emergency" if params.emergency %}
 {% set emergencyTitle = params.emergencyTitle or "Emergency notification title" %}
@@ -21,11 +24,11 @@
          wmndsIcon({
             class: "wmnds-banner-container__emergency-icon-error",
             icon: "general-warning-triangle"
-         }) | indent(8) | trim
+         })
       }}
       </div>
       <div class="{{titleColClass}} wmnds-col-1 wmnds-banner-container__emergency-title-col">
-         <h2 class="wmnds-h4 wmnds-m-b-none">{{emergencyTitle}}</h2>
+         <h2 class="wmnds-h4 wmnds-m-b-none">{{_content}}</h2>
       </div>
       {% if not params.onPage -%}
       <div class="wmnds-col-xl-10-24 wmnds-col-1 wmnds-banner-container__emergency-link-col">
@@ -35,7 +38,7 @@
                wmndsIcon({
                   class: "wmnds-banner-container__emergency-icon wmnds-m-l-sm",
                   icon: "general-chevron-right"
-               }) | indent(12) | trim
+               })
             }}
          </a>
       </div>
@@ -47,7 +50,7 @@
             wmndsIcon({
                class: "wmnds-banner-container__emergency-icon wmnds-m-l-sm",
                icon: "general-cross"
-            }) | indent(12) | trim
+            })
          }}
          </button>
       </div>
@@ -57,7 +60,9 @@
       {% if params.phase -%}
       <div class="wmnds-banner-container__phase-wrapper">
          {{
-            wmndsPhaseIndicator() | indent(6) | trim
+            wmndsPhaseIndicator({
+               indicatorText: params.phaseText
+            })
          }}
       </div>
       {% endif -%}

diff --git a/src/wmnds/patterns/banner/_example.njk b/src/wmnds/patterns/banner/_example.njk
@@ -0,0 +1,14 @@
+{% raw %}
+{% from "wmnds/patterns/banner/_banner.njk" import wmndsBanner %}
+
+{{
+   wmndsBanner({
+      contentText: null,
+      contentHTML: "This is a new service - your <a href='#'>feedback</a> will help us to improve it.",
+      emergency: false,
+      onPage: false,
+      phase: false,
+      phaseText: null
+   })
+}}
+{% endraw %}
diff --git a/src/wmnds/patterns/banner/_properties.njk.json b/src/wmnds/patterns/banner/_properties.njk.json
@@ -0,0 +1,34 @@
+{
+  "wmndsBannerProps": [
+    {
+      "name": "contentText",
+      "type": "string",
+      "description": "<strong>Required.</strong> Specifies the content that will be part of the banner. If contentHTML is supplied, this is ignored."
+    },
+    {
+      "name": "contentHTML",
+      "type": "string",
+      "description": "<strong>Required.</strong> Uses HTML to specify what content is to be shown in the banner."
+    },
+    {
+      "name": "emergency",
+      "type": "boolean",
+      "description": "If set to true the banner will display in the emergency style"
+    },
+    {
+      "name": "onPage",
+      "type": "boolean",
+      "description": "If set to true the on page variant of the banner will display."
+    },
+    {
+      "name": "phase",
+      "type": "boolean",
+      "description": "If set to true the banner will display the phase indicator."
+    },
+    {
+      "name": "phaseText",
+      "type": "string",
+      "description": "Text to show in the phase indicator"
+    }
+  ]
+}
diff --git a/src/www/pages/patterns/banner/index.njk.md b/src/www/pages/patterns/banner/index.njk.md
@@ -14,8 +14,16 @@
 
 {{
   compExample([
-    wmndsBanner()
-  ])
+    wmndsBanner({
+      contentHTML: "This is a new service - your <a href='#/'>feedback</a> will help us to improve it."
+    })
+  ], {
+      componentPath: "wmnds/patterns/banner/",
+      njk: true,
+      njkProps: wmndsBannerProps,
+      js: false,
+      iframe: false
+    })
 }}
 
 {% markdown %}
@@ -57,7 +65,13 @@
     wmndsBanner({
       phase: true
     })
-  ])
+  ], {
+      componentPath: "wmnds/patterns/banner/",
+      njk: true,
+      njkProps: wmndsBannerProps,
+      js: false,
+      iframe: false
+    })
 }}
 
 {% markdown %}
@@ -105,9 +119,16 @@
 {{
   compExample([
     wmndsBanner({
+      contentText: "Emergency notification title",
       emergency: true
     })
-  ])
+  ], {
+      componentPath: "wmnds/patterns/banner/",
+      njk: true,
+      njkProps: wmndsBannerProps,
+      js: false,
+      iframe: true
+    })
 }}
 
 {% markdown %}
@@ -120,10 +141,17 @@
 {{
   compExample([
     wmndsBanner({
+      contentText: "Emergency notification title",
       emergency: true,
       onPage: true
     })
-  ])
+  ], {
+      componentPath: "wmnds/patterns/banner/",
+      njk: true,
+      njkProps: wmndsBannerProps,
+      js: false,
+      iframe: false
+    })
 }}
 {% markdown %}