@qld-gov-au/qgds-bootstrap5 1.0.13 → 1.0.15

package/src/components/bs5/footer/footer.stories.js

@@ -1,11 +1,11 @@
 // footer.stories.js
-import { Footer, FooterForgov } from './Footer.js';
+import { Footer, FooterForgov } from "./Footer.js";
 
-import defaultdata from './footer.data.json';
+import defaultdata from "./footer.data.json";
 
 export default {
-  tags: ['autodocs'],
-  title: 'Components/Footer',
+  tags: ["autodocs"],
+  title: "Components/Footer",
   render: (args) => new Footer(args).html,
 };
 
@@ -19,7 +19,6 @@ export const Default = {
   },
 };
 
-
 /**
  * Footer: White
  */
@@ -46,7 +45,6 @@ export const DarkAlt = {
   },
 };
 
-
 /**
  * Forgov footer
  */
@@ -56,6 +54,19 @@ export const Forgov = {
     ...defaultdata,
     variantClass: "dark",
     sitename: "For Government",
+    footerHasCrest: false,
+    feedbackFormEnabled: true,
+    followlinksEnabled: false,
+    contactHasContactList: false,
+    copyrightHasYearFrom: true,
+    footerHasStateOfQld: false,
+    acknowledgements: [
+      {
+        title: "Cultural acknowledgement",
+        content:
+          "<p>Queensland Government acknowledges the Traditional Owners of the land and pays respect to Elders past, present and future.</p>",
+      },
+    ],
   },
   render: (args) => new FooterForgov(args).html,
 };

package/src/components/bs5/footer/footerForgov.hbs

@@ -1,69 +1,98 @@
-<footer class="qld-footer {{variantClass}}" role="contentinfo">
+<footer class="qld-footer {{ variantClass }}" role="contentinfo">
 
-    <!-- Footer content container -->
+  <!-- Footer content container -->
     <div class="container">
 
         <div class="row">
-            <div class="col">
+            <div class="col title">
                 <h2 class="footer-site-name">{{ sitename }}</h2>
             </div>
         </div>
 
         <div class="row">
 
-            <!-- Section 2: Contact us and Site wide CTAs -->
-            <div class="col-sm-12 col-md-6 col-lg-4 col-xl-3">
+            {{!-- Section 1: Contact us and Site wide CTAs --}}
+            <div class="col-xs-12 col-md-12 col-lg-3">
+                <div class="footer-column footer-contact {{#if contact.hasBorderColumn}}border-column{{/if}}">
+                    <div class="row">
+                        <div class="col-xs-12 col-md-6 col-lg-12">
+                            <h3 class="footer-heading">{{ contact.title }}</h3>
 
-                <div class="footer-column footer-contact">
-                
-                    <h2 class="footer-heading">{{ contact.title }}</h2>
-
-                    <div class="footer-content">
-
-                        {{{ contact.content }}}
-
-                        {{#each contact.list }}
-                        <div class="footer-contact-item">
-                            <span class="qld-icon {{icon}}" aria-hidden="true"></span>
-                            {{{ label }}}
+                            <div class="footer-content">
+                                {{{ contact.content }}}
+                                {{#if contactHasContactList}}
+                                    {{#each contact.list}}
+                                        <div class="footer-contact-item">
+                                            <span class="qld-icon {{icon}}" aria-hidden="true"></span> {{{ label }}}
+                                        </div>
+                                    {{/each}}
+                                {{/if}}
+                            </div>
+                        </div>
+                        <div class="col-xs-12 col-md-6 col-lg-12">
+                            <a href="{{ contact.buttonLink }}" class="btn btn-outline-secondary">{{ contact.buttonLabel }}</a>
                         </div>
-                        {{/each}}
-
-                        <a href="{{ contact.buttonLink }}" class="btn btn-outline-secondary">{{ contact.buttonLabel }}</a>
-
                     </div>
-                
                 </div>
             </div>
 
-            <!-- Section 5: Social media and engagment -->
-            <div class="col-xs-12 col-md-6 col-lg-4 col-xl-3 border-column">
-
-                <div class="footer-column footer-contact">
-                
-                    <h2 class="footer-heading">{{ feedback.title }}</h2>
-
-                    <div class="footer-content">
-
-                        {{{ feedback.content }}}
-
-                        <a href="{{ feedback.buttonLink }}" class="btn btn-outline-secondary">{{ feedback.buttonLabel }}</a>
+            {{!-- Section 2: Section links (Custom secondary nav items) --}}
+            <div class="col-xs-12 col-md-12 col-lg-3" aria-label="footer-navigation">
+                <div class="footer-column {{#if footerlinks.hasBorderColumn}}border-column{{/if}}">
+                    <nav class="nav footer-link-list flex-column">
+                        {{#each footerlinks.list}}
+                            <a class="nav-link" href="{{ link }}" target="{{ target }}">{{{ title }}}</a>
+                        {{/each }}
+                    </nav>
+                </div>
+            </div>
 
+            {{!-- Section 3: Feedback form area --}}
+            {{#if feedbackFormEnabled}}
+            <div class="col-xs-12 col-md-12 col-lg-3">
+                <div class="footer-column {{#if feedbackForm.hasBorderColumn}}border-column{{/if}}">
+                    <div class="row">
+                        <div class="col-xs-12 col-md-6 col-lg-12">
+                            <h3 class="footer-heading">{{ feedbackForm.title }}</h3>
+                            {{#if feedbackForm45}}
+                                <h2>dsdfsdf</h2>
+                            {{/if}}
+                            <p>{{ feedbackForm.content }}</p>
+                        </div>
+                        <div class="col-xs-12 col-md-6 col-lg-12">
+                            <div id="qg-feedback-toggle" class="qg-footer-feedback-wrap">
+                                <a id="btn-footer-feedback" class="btn btn-global-secondary qg-feedback-toggle collapsed" data-bs-toggle="collapse" href="#qg-footer-feedback" role="button" aria-expanded="false" aria-controls="qg-footer-feedback" data-analytics-link-group="qg-feedback">
+                                    {{ feedbackForm.btnTitle }}
+                                </a>
+                                <div id="qg-footer-feedback" class="qg-footer-feedback__v2 collapse">
+                                    <script>
+                                        window.formioQldCdnVersion = "v2/v2.x.x-latest";
+                                    </script>
+                                    {{!-- If formioResource has the wrong URL or the future URL changes  --}}
+                                    {{!-- Make sure that this is also changed within footer.function.js --}}
+                                    {{!-- It is there to make sure that Form IO is alway got to --}}
+                                    <script src="{{{feedbackForm.formioResource}}}"></script>
+                                    <div id="feedbackFormIO" {{#each feedbackForm.formAttr}}{{#if @first}}{{ key }}{{/if}} {{#unless @first}}{{ key }}="{{ value }}"{{/unless}}{{/each}}>
+                                        <div class="qg-spinner" role="status">
+                                            <div class="spinner-border"></div>
+                                            <div class="qg-spinner-label">Loading...</div>
+                                        </div>
+                                    </div>
+                                    <div class="qg-footer-feedback-footer">
+                                        <a class="qg-footer-feedback__close" data-bs-toggle="collapse" href="#qg-footer-feedback" role="button" aria-expanded="true" aria-controls="qg-footer-feedback">Close</a>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
                     </div>
                 </div>
-
             </div>
+            {{/if}}
 
-                    
-                        
-                  
-
-            <!-- Section 6: Aknowlegement, Qld Government Coat of Arms and Copyright information -->
-            <div class="col-12 col-md-12 col-lg-4 col-xl-5 offset-xl-1 border-column">
-
-                <div class="footer-column">
-
-                    <!-- SVG crest -->
+            {{!-- Section 4: Aknowlegement, Qld Government Coat of Arms and Copyright information --}}
+            <div class="col-xs-12 col-md-12 col-lg-3 crest">
+                <div class="footer-column {{#if copyright.hasBorderColumn}}border-column{{/if}}">
+                    {{#if footerHasCrest}}
                     <div class="footer-crest">
                         <svg width="252" height="44" viewBox="0 0 252 44" fill="none"
                             xmlns="http://www.w3.org/2000/svg">
@@ -231,22 +260,21 @@
                                 fill="white" />
                         </svg>
                     </div>
-
+                    {{/if}}
                     <div class="footer-content">
+                        {{#each acknowledgements}}
+                        
+                            {{#if title}}
+                                <h3 class="footer-heading">{{title}}</h3>
+                            {{/if}}
 
-                        <div class="footer-acknowledgements">
-                            {{#each acknowledgements}}
                             {{{ content }}}
-                            {{/each}}
-                        </div>
-
-
-                        {{{ copyright.content }}}
-
-                        <p>
-                            <a class="fw-semibold" href="{{ lockup.link.URL }}" rel="external">{{ lockup.link.text }}</a>
-                        </p>
-
+                        
+                        {{/each}}
+                        <p class="copyright">{{{ copyright.content }}} {{#if copyrightHasYearFrom }}{{ copyright.yearFrom }} - {{/if}} {{copyright.currentYear}}</p>
+                        {{#if footerHasStateOfQld }}
+                            <p><a class="fw-semibold" href="{{ lookup.link.URL }}" rel="external">{{ lookup.link.text }}</a></p>
+                        {{/if}}
                     </div>
 
                 </div>      
@@ -254,5 +282,4 @@
 
         </div>
     </div>
-
 </footer>

package/src/components/bs5/header/_colours.scss

@@ -2,7 +2,6 @@
     // ------------------------------------------------------------------------------------------------------------------
     //  1. Common vars
     // ------------------------------------------------------------------------------------------------------------------
-
     // Shared thickness, offset etc. 
     --#{$prefix}header-underline__thickness-thin: 0.5px;
     --#{$prefix}header-underline__thickness-thick: 2px;
@@ -11,22 +10,6 @@
     // ------------------------------------------------------------------------------------------------------------------
     //  2. Second hand variables (each variant, default, light, dark, dark-alt) using QGDS-Tokens (npm)
     // ------------------------------------------------------------------------------------------------------------------
-    //  Search inputs
-    --#{$prefix}header-site-search-bg: var(--#{$prefix}color-default-color-light-background-default-shade);
-    --#{$prefix}header-site-search-btn-color: var(--#{$prefix}color-default-color-dark-text-default);
-    --#{$prefix}header-site-search-btn-bg: var(--#{$prefix}color-default-color-light-link-default);
-    --#{$prefix}header-site-search-border-color: var(--#{$prefix}color-default-color-light-action-primary-hover);
-    --#{$prefix}header-site-search-icon-color:var(--#{$prefix}color-default-color-light-text-lighter);
-    --#{$prefix}header-site-search-text-color:var(--#{$prefix}color-default-color-light-text-default);
-
-    // Search input dark
-    --#{$prefix}header-dark-site-search-bg: var(--#{$prefix}color-default-color-dark-background-default-shade);
-    --#{$prefix}header-dark-site-search-btn-color: var(--#{$prefix}color-default-color-light-text-default);
-    --#{$prefix}header-dark-site-search-btn-bg: var(--#{$prefix}color-default-color-light-accent-design-accent);
-    --#{$prefix}header-dark-site-search-border-color: var(--#{$prefix}color-default-color-dark-border-default);
-    --#{$prefix}header-dark-site-search-icon-color:var(--#{$prefix}color-default-color-dark-text-lighter);
-    --#{$prefix}header-dark-site-search-text-color:var(--#{$prefix}color-default-color-dark-text-default);
-
     // Header
     --#{$prefix}header_color: var(--#{$prefix}color-default-color-light-text-default);
     --#{$prefix}header_bg: var(--#{$prefix}color-default-color-light-background-default);
@@ -80,24 +63,6 @@
     --#{$prefix}header__site-name__heading__text_color: var(--#{$prefix}color-default-color-light-site-title);
     --#{$prefix}header__site-name__subline__text_color: var(--#{$prefix}color-default-color-light-text-lighter);
 
-    // Search
-    --site-search-bg: var(--#{$prefix}header-site-search-bg);
-    --site-search-btn-color: var(--#{$prefix}header-site-search-btn-color);
-    --site-search-btn-bg: var(--#{$prefix}header-site-search-btn-bg);
-    --site-search-border-color: var(--#{$prefix}header-site-search-border-color);
-    --site-search-icon-color: var(--#{$prefix}header-site-search-icon-color);
-    --site-search-input-color: var(--#{$prefix}header-site-search-text-color);
-    --site-search-input-focus-color: var(--#{$prefix}color-default-color-light-focus-default);
-    --site-search-text-color: var(--#{$prefix}header-site-search-text-color);
-
-    // Suggestions colours
-    --#{$prefix}header_site-search-suggestions-bg: var(--#{$prefix}color-default-color-light-background-default-shade);
-    --#{$prefix}header_site-search-suggestions-hover: var(--#{$prefix}color-default-color-light-border-default);
-    --#{$prefix}header_site-search-suggestions-hover__border_color: var(--#{$prefix}color-default-color-light-accent-design-accent);
-    --#{$prefix}header_site-search-suggestions-feature_bg: var(--#{$prefix}color-default-color-dark-background-default);
-    --#{$prefix}header_site-search-suggestions-feature_hover: var(--#{$prefix}color-default-color-dark-background-default-shade);
-    --#{$prefix}header_site-search-suggestions-feature_text-color: var(--#{$prefix}color-default-color-dark-text-default);
-
     // ------------------------------------------------------------------------------------------------------------------
     //  3. Dark/dark-alt modes
     // ------------------------------------------------------------------------------------------------------------------
@@ -147,23 +112,6 @@
 
         // COA
         --#{$prefix}header__brand-image__crest_fill: var(--#{$prefix}color-default-color-dark-crest-fill);
-        
-        // Search (dark/dark/alt)
-        --site-search-bg: var(--#{$prefix}header-dark-site-search-bg);
-        --site-search-btn-color: var(--#{$prefix}header-dark-site-search-btn-color);
-        --site-search-btn-bg: var(--#{$prefix}header-dark-site-search-btn-bg);
-        --site-search-border-color: var(--#{$prefix}header-dark-site-search-border-color);
-        --site-search-icon-color: var(--#{$prefix}header-dark-site-search-icon-color);
-        --site-search-input-color: var(--#{$prefix}header-dark-site-search-text-color);
-        --site-search-text-color: var(--#{$prefix}header-site-search-text-color);
-
-        // Suggestions colours
-        --#{$prefix}header_site-search-suggestions-bg: var(--#{$prefix}color-default-color-dark-background-default-shade);
-        --#{$prefix}header_site-search-suggestions-hover: var(--#{$prefix}color-default-color-dark-background-default);
-        --#{$prefix}header_site-search-suggestions-hover__border_color: var(--#{$prefix}color-default-color-dark-accent-design-accent);
-        --#{$prefix}header_site-search-suggestions-feature_bg: var(--#{$prefix}color-default-color-dark-background-alt);
-        --#{$prefix}header_site-search-suggestions-feature_hover: var(--#{$prefix}color-default-color-dark-background-alt-shade);
-        --#{$prefix}header_site-search-suggestions-feature_text-color: var(--#{$prefix}color-default-color-dark-text-default);
     }
 
     .dark-alt & {

package/src/components/bs5/header/header.data.json

@@ -4,7 +4,8 @@
         "icons": {
             "menu-icon": "qld__icon__mobile-menu",
             "search-icon": "qld__icon__search",
-            "close-icon": "qld__icon__close"
+            "close-icon": "qld__icon__close",
+            "chevron_down": "qld__icon__chevron-down"
         },
         "sitePreHeader": {
             "url": {
@@ -19,9 +20,6 @@
                     "url": {
                         "value": "#"
                     },
-                    "icon": {
-                        "value": "ctaIcon"
-                    },
                     "text": {
                         "value": "For Queenslanders"
                     },
@@ -77,9 +75,6 @@
                     "url": {
                         "value": "#"
                     },
-                    "icon": {
-                        "value": "ctaIcon"
-                    },
                     "text": {
                         "value": "Business and Industry"
                     },
@@ -135,9 +130,6 @@
                     "url": {
                         "value": "#"
                     },
-                    "icon": {
-                        "value": "ctaIcon"
-                    },
                     "text": {
                         "value": "Login"
                     },
@@ -194,7 +186,8 @@
         "icons": {
             "menu-icon": "qld__icon__mobile-menu",
             "search-icon": "qld__icon__search",
-            "close-icon": "qld__icon__close"
+            "close-icon": "qld__icon__close",
+            "chevron_down": "qld__icon__chevron-down"
         },
         "sitePreHeader": {
             "url": {
@@ -203,48 +196,134 @@
             "text": {
                 "value": "Queensland Government websites"
             },
-            "mainNavCtaOne": {
-                "value": "#",
-                "icon": {
-                    "value": "#"
-                },
-                "text": {
-                    "value": "List 1"
-                },
-                "dropdown_enabled": true,
-                "dropdown_options": {
-                    "dropdown_type": "list"
-                }
-            },
-            "mainNavCtaTwo": {
-                "value": "#",
-                "icon": {
-                    "value": "#"
-                },
-                "text": {
-                    "value": "List 2"
-                },
-                "dropdown_enabled": true,
-                "dropdown_options": {
-                    "dropdown_type": "list"
-                }
-            },
-            "mainNavCtaThree": {
-                "value": "#",
-                "icon": {
-                    "value": "ctaIcon"
+            "CTA": [
+                {
+                    "id": "CTAone",
+                    "url": {
+                        "value": "#"
+                    },
+                    "text": {
+                        "value": "For Queenslanders"
+                    },
+                    "dropdown_enabled": true,
+                    "dropdown_options": {
+                        "dropdown_type": "list",
+                        "view_more_label": "Browse all information and services",
+                        "view_more_url": "https://www.qld.gov.au/queenslanders",
+                        "dropdown_config": {
+                            "groups": [
+                                {
+                                    "action": "_blank",
+                                    "url": "#",
+                                    "label": "Transport and motoring"
+                                },
+                                {
+                                    "action": "_blank",
+                                    "url": "#",
+                                    "label": "Employment and jobs"
+                                },
+                                {
+                                    "action": "_blank",
+                                    "url": "#",
+                                    "label": "Education and training"
+                                },
+                                {
+                                    "action": "_blank",
+                                    "url": "#",
+                                    "label": "Queensland and its government"
+                                },
+                                {
+                                    "action": "_blank",
+                                    "url": "#",
+                                    "label": "Health and wellbeing"
+                                },
+                                {
+                                    "action": "_blank",
+                                    "url": "#",
+                                    "label": "Community support"
+                                }
+                            ],
+                            "view_more": true,
+                            "view_more_options": {
+                                "url": "#",
+                                "label": "View more",
+                                "target": "_blank"
+                            }
+                        }
+                    }
                 },
-                "text": {
-                    "value": "Login"
+                {
+                    "id": "CTAtwo",
+                    "url": {
+                        "value": "#"
+                    },
+                    "text": {
+                        "value": "Business and Industry"
+                    },
+                    "dropdown_enabled": true,
+                    "dropdown_options": {
+                        "dropdown_type": "list",
+                        "view_more_label": "All categories",
+                        "view_more_url": "https://www.business.qld.gov.au/",
+                        "dropdown_config": {
+                            "groups": [
+                                {
+                                    "action": "_blank",
+                                    "url": "#",
+                                    "label": "Starting a business"
+                                },
+                                {
+                                    "action": "_blank",
+                                    "url": "#",
+                                    "label": "Running a business"
+                                },
+                                {
+                                    "action": "_blank",
+                                    "url": "#",
+                                    "label": "Employing people"
+                                },
+                                {
+                                    "action": "_blank",
+                                    "url": "#",
+                                    "label": "Payroll tax"
+                                },
+                                {
+                                    "action": "_blank",
+                                    "url": "#",
+                                    "label": "Industries"
+                                },
+                                {
+                                    "action": "_blank",
+                                    "url": "#",
+                                    "label": "Investing in Queensland"
+                                }
+                            ],
+                            "view_more": true,
+                            "view_more_options": {
+                                "url": "#",
+                                "label": "View more",
+                                "target": "_blank"
+                            }
+                        }
+                    }
                 },
-                "dropdown_enabled": true,
-                "dropdown_options": {
-                    "dropdown_type": "form",
-                    "dropdown_config": {
-                        "content": "<div></div>"
+                {
+                    "id": "CTAthree",
+                    "url": {
+                        "value": "#"
+                    },
+                    "text": {
+                        "value": "Login"
+                    },
+                    "dropdown_enabled": true,
+                    "dropdown_options": {
+                        "dropdown_type": "form",
+                        "dropdown_config": {
+                            "content": "<div></div>"
+                        }
                     }
                 }
-            }
+            ]
         },
         "siteHeader": {
             "config": {
@@ -274,9 +353,7 @@
             "placeholder": "Placeholder",
             "label": "Label",
             "formAction": {
-                "url": "https://www.forgov.qld.gov.au/search",
-                "suggestions": "https://discover.search.qld.gov.au/s/suggest.json",
-                "results": "https://discover.search.qld.gov.au/s/search.json"
+                "url": "https://www.forgov.qld.gov.au/search"
             },
             "options": {
                 "borderStyle": {
@@ -290,7 +367,8 @@
         "icons": {
             "menu-icon": "qld__icon__mobile-menu",
             "search-icon": "qld__icon__search",
-            "close-icon": "qld__icon__close"
+            "close-icon": "qld__icon__close",
+            "chevron_down": "qld__icon__chevron-down"
         },
         "sitePreHeader": {
             "url": {
@@ -305,9 +383,6 @@
                     "url": {
                         "value": "#"
                     },
-                    "icon": {
-                        "value": "ctaIcon"
-                    },
                     "text": {
                         "value": "For Queenslanders"
                     },
@@ -363,9 +438,6 @@
                     "url": {
                         "value": "#"
                     },
-                    "icon": {
-                        "value": "ctaIcon"
-                    },
                     "text": {
                         "value": "Business and Industry"
                     },
@@ -421,9 +493,6 @@
                     "url": {
                         "value": "#"
                     },
-                    "icon": {
-                        "value": "ctaIcon"
-                    },
                     "text": {
                         "value": "Login"
                     },
@@ -464,9 +533,7 @@
             "placeholder": "",
             "label": "",
             "formAction": {
-                "url": "https://www.forgov.qld.gov.au/search",
-                "suggestions": "https://discover.search.qld.gov.au/s/suggest.json",
-                "results": "https://discover.search.qld.gov.au/s/search.json"
+                "url": "https://www.forgov.qld.gov.au/search"
             },
             "options": {
                 "borderStyle": {
@@ -480,7 +547,8 @@
         "icons": {
             "menu-icon": "qld__icon__mobile-menu",
             "search-icon": "qld__icon__search",
-            "close-icon": "qld__icon__close"
+            "close-icon": "qld__icon__close",
+            "chevron_down": "qld__icon__chevron-down"
         },
         "sitePreHeader": {
             "url": {
@@ -495,9 +563,6 @@
                     "url": {
                         "value": "#"
                     },
-                    "icon": {
-                        "value": "ctaIcon"
-                    },
                     "text": {
                         "value": "For Queenslanders"
                     },
@@ -553,9 +618,6 @@
                     "url": {
                         "value": "#"
                     },
-                    "icon": {
-                        "value": "ctaIcon"
-                    },
                     "text": {
                         "value": "Business and Industry"
                     },
@@ -611,9 +673,6 @@
                     "url": {
                         "value": "#"
                     },
-                    "icon": {
-                        "value": "ctaIcon"
-                    },
                     "text": {
                         "value": "Login"
                     },