@qld-gov-au/qgds-bootstrap5 1.1.41 → 2.0.1

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

@@ -1,6 +1,7 @@
 import { Navbar } from "./Navbar.js";
 import defaultdata from "./navbar.data.json";
 
+//Default story
 export default {
   tags: ["autodocs"],
   title: "3. Components/Navbar",

package/src/components/bs5/pageLayout/{FullWidthLandingPage.js → HomePage.js}

@@ -1,7 +1,7 @@
 import Component from "../../../js/QGDSComponent.js";
-import template from "./templates/fullWidthLandingPage.hbs?raw";
+import template from "./templates/homePage.hbs?raw";
 
-export class FullWidthLandingPage {
+export class HomePage {
   constructor(data = {}) {
     return new Component(template, data);
   }

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

@@ -1,5 +1,4 @@
-import { PageLayout } from "./pageLayout.js";
-import { FullWidthLandingPage } from "./FullWidthLandingPage.js";
+import { HomePage } from "./HomePage.js";
 import { ContentPageWithSideNavigation } from "./ContentPageWithSideNavigation.js";
 import { ContentPageWithForm } from "./ContentPageWithForm.js";
 //Data
@@ -9,11 +8,11 @@ import globalAlertData from "../globalAlert/globalAlert.data.json";
 import tableData from "../table/table.data.json";
 import footerData from "../footer/footer.data.json";
 import contentFooterData from "../contentFooter/contentFooter.data.json";
+import callToActionData from "../callToAction/callToAction.data.json";
 import bannerData from "../banner/banner.data.json";
 import cardData from "../card/card.data.json";
 import linkColumnsData from "../linkColumns/linkColumns.data.json";
 import promotionalPanelData from "../promotionalPanel/promotionalPanel.data.json";
-import sidenavData from "../sidenav/sidenav.data.json";
 import inpagenavData from "../inpagenav/inpagenav.data.json";
 import breadcrumbsData from "../breadcrumbs/breadcrumbs.data.json";
 import imageData from "../image/image.data.json";
@@ -23,10 +22,38 @@ import textareaData from "../textarea/textarea.data.json";
 import searchData from "../searchInput/searchInput.data.json";
 import selectData from "../select/select.data.json";
 import buttonData from "../button/button.data.json";
-import checkboxData from "../formcheck/stories/checkbox/checkbox.data.json";
-import radioData from "../formcheck/stories/radio/radio.data.json";
+import buttondata from "../button/button.data.json";
+import accordionData from "../accordion/accordion.data.json";
+
 import { SearchInput } from "../searchInput/SearchInput.js";
 
+const sideNavData = {
+  navtitle: "Template",
+  navtitlelink: "#optionallink",
+  navlist: [
+    {
+      link: "#https://www.qld.gov.au/transport/registration/register/heavy",
+      label: "Home page",
+      class: "",
+    },
+    {
+      link: "#",
+      label: "Content page (no bar)",
+      class: "",
+    },
+    {
+      link: "#",
+      label: "Content page (basic bar)",
+      class: "",
+    },
+    {
+      link: "#",
+      label: "Single page form",
+      class: "",
+    },
+  ],
+};
+
 const defaultData = {
   cdn: ".", //for storybook it's ., for normal usage "PROD"
   title: "title goes here",
@@ -37,15 +64,18 @@ const defaultData = {
   navbar: menu_state,
   table: tableData,
   globalAlert: globalAlertData.critical,
-  footer: footerData,
+  footer: {
+    ...footerData,
+    variantClass: "dark",
+  },
   contentFooter: contentFooterData,
-  sidenav: sidenavData,
+  sidenav: sideNavData,
 };
 
 export default {
-  title: "6. Templates/Page Layout",
+  title: "5. Templates/Page Layout",
   render: (args) => {
-    return new PageLayout(args).html;
+    return new ContentPageWithSideNavigation(args).html;
   },
   args: defaultData,
   argTypes: {},
@@ -57,22 +87,46 @@ export default {
   },
 };
 
+const SideNavArgs = {
+  ...defaultData,
+  title: "Content Page with Side Navigation",
+  accordionItems: accordionData,
+  calloutdata: {
+    title: "Call out heading",
+    content:
+      "Faucibus urna non suspendisse augue donec fermentum. Semper elementum dui odio sociis. Quis risus pellentesque consectetur risus senectus. Egestas lectus nec dui odio vitae sem. Convallis pulvinar arcu feugiat eget. Est convallis mattis mauris nisi suscipit.",
+  },
+  inpagenav: inpagenavData,
+  image: imageData,
+  video: videoData.youtube,
+  callToAction: {
+    ...callToActionData,
+    label: "Call to action",
+  },
+};
+
 /**
- * Default page layout
+ * Default Content Page with Side Navigation
  */
 export const Default = {
   args: {
-    backToTop: {
-      hide_back_to_top: false,
-      min_page_height: 0,
-      is_fixed: false,
-      directionalLink: {
-        id: "",
-        label: "Back to top",
-        href: "#",
-        target: "_self",
-        class: "back-to-top up my-2 ms-auto",
-      },
+    ...SideNavArgs,
+    banner: {
+      variantClass: "dark",
+      bannerType: "no-banner",
+      breadcrumbs: breadcrumbsData.default,
+    },
+    sidenav: {
+      ...sideNavData,
+      navlist: [
+        sideNavData.navlist[0],
+        {
+          ...sideNavData.navlist[1],
+          class: "active",
+        },
+        sideNavData.navlist[2],
+        sideNavData.navlist[3],
+      ],
     },
   },
 };
@@ -80,9 +134,9 @@ export const Default = {
 /**
  * Full Width Landing Page
  */
-export const FullWidthLanding = {
+export const Home = {
   render: (args) => {
-    return new FullWidthLandingPage(args).html;
+    return new HomePage(args).html;
   },
   args: {
     ...defaultData,
@@ -91,6 +145,21 @@ export const FullWidthLanding = {
       ...bannerData,
       title: "Welcome to Queensland Government",
       abstract: "Your gateway to government services and information.",
+      bannerType: "banner-advanced",
+      backgroundType: "with-hero-image",
+      "image.classes": "align-grid",
+      callToAction: "buttons",
+      buttons: [
+        {
+          ...buttondata,
+          iconClass: false,
+        },
+        {
+          ...buttondata,
+          classes: ["btn-secondary"],
+          variantClass: "btn-secondary",
+        },
+      ],
     },
     cardGrid: {
       cards: [
@@ -99,36 +168,73 @@ export const FullWidthLanding = {
           title: "Services",
           description: "Access government services online",
           link: "#services",
+          iconClasses: "qld-icon-design",
+          iconPosition: "icon-top",
         },
         {
           ...cardData.singleAction,
           title: "Information",
           description: "Find important information and resources",
           link: "#information",
+          iconClasses: "qld-icon-design",
+          iconPosition: "icon-top",
         },
         {
           ...cardData.singleAction,
           title: "Support",
           description: "Get help when you need it",
           link: "#support",
+          iconClasses: "qld-icon-design",
+          iconPosition: "icon-top",
+        },
+      ],
+    },
+    cardGridBottom: {
+      cards: [
+        {
+          ...cardData.singleAction,
+          title: "Services",
+          description: "Access government services online",
+          link: "#services",
+          image: "./assets/img/image-placeholder.png",
+          imageAlt: "A grey placeholder image with an icon in the centre.",
+        },
+        {
+          ...cardData.singleAction,
+          title: "Information",
+          description: "Find important information and resources",
+          link: "#information",
+          image: "./assets/img/image-placeholder.png",
+          imageAlt: "A grey placeholder image with an icon in the centre.",
+        },
+        {
+          ...cardData.singleAction,
+          title: "Support",
+          description: "Get help when you need it",
+          link: "#support",
+          image: "./assets/img/image-placeholder.png",
+          imageAlt: "A grey placeholder image with an icon in the centre.",
         },
       ],
     },
     linkColumns: linkColumnsData,
-    promotionalPanel: promotionalPanelData,
+    callToAction: callToActionData,
+    promotionalPanel: {
+      ...promotionalPanelData,
+      variantClass: "dark",
+    },
   },
 };
 
 /**
  * Content Page with Side Navigation
  */
-export const ContentPageWithSideNav = {
+export const ContentPageBasicBanner = {
   render: (args) => {
     return new ContentPageWithSideNavigation(args).html;
   },
   args: {
-    ...defaultData,
-    title: "Content Page with Side Navigation",
+    ...SideNavArgs,
     banner: {
       ...bannerData,
       title: "Vehicle Registration",
@@ -136,131 +242,169 @@ export const ContentPageWithSideNav = {
         "Everything you need to know about registering your vehicle in Queensland.",
       breadcrumbs: breadcrumbsData.default,
     },
-    sidenav: sidenavData,
-    inpagenav: inpagenavData,
-    image: imageData,
-    video: videoData.youtube,
+    sidenav: {
+      ...sideNavData,
+      navlist: [
+        sideNavData.navlist[0],
+        sideNavData.navlist[1],
+        {
+          ...sideNavData.navlist[2],
+          class: "active",
+        },
+        sideNavData.navlist[3],
+      ],
+    },
   },
 };
 
 /**
  * Content Page with Form
  */
-export const ContentPageWithFormExample = {
+export const ContentPageWithSingleForm = {
   render: (args) => {
     return new ContentPageWithForm(args).html;
   },
   args: {
     ...defaultData,
     title: "Contact Us Form",
+    inpageAlert: {
+      variantClass: "alert-info",
+      alertType: "",
+      content:
+        "<p>Response times are estimated at 15 working days. If you're looking for a quicker response, call 13 QGOV ( <a href='#'>13 74 68</a>).</p>",
+    },
     banner: {
       ...bannerData,
       title: "Contact Us",
       abstract: "Get in touch with us using the form below.",
       breadcrumbs: breadcrumbsData.default,
     },
+    sidenav: {
+      ...sideNavData,
+      navlist: [
+        sideNavData.navlist[0],
+        sideNavData.navlist[1],
+        sideNavData.navlist[2],
+        {
+          ...sideNavData.navlist[3],
+          class: "active",
+        },
+      ],
+    },
     content: `
       <h1>Contact Form</h1>
       <p>Please fill out the form below and we'll get back to you as soon as possible.</p>
     `,
     form: {
-      fields: [
+      fields1: [
+        {
+          type: "radio",
+          questionLabel: "Type of enquiry",
+          listClasses: "field-required",
+          listitems: [
+            {
+              type: "radio",
+              id: "type1",
+              name: "enquiry",
+              label: "Complaint",
+              value: "complaint",
+              isDisabled: false,
+            },
+            {
+              type: "radio",
+              id: "type2",
+              name: "enquiry",
+              label: "Compliment",
+              value: "compliment",
+              isDisabled: false,
+            },
+          ],
+        },
         {
           ...textboxData,
           type: "textbox",
-          label: "First Name",
+          "label-text":
+            "Please tell us in a few words what your enquiry relates to",
+          label: "Please tell us in a few words what your enquiry relates to",
+          "optional-text": "",
+          placeholder: "",
+          "hint-text":
+            "This will help us determine the most appropriate person to respond",
           id: "firstName",
           required: true,
         },
+        {
+          ...textareaData,
+          type: "textarea",
+          "label-text": "Tell us what happened",
+          label: "Tell us what happened",
+          "optional-text": "",
+          "hint-text":
+            "Provide as much information as possible to help us better respond to your feedback. There is no character limit. Please don't include private information like credit card details or medical history.",
+          rows: 4,
+          cols: 50,
+          maxlength: 500,
+          minlength: 10,
+          resize: true,
+          id: "message",
+          required: true,
+        },
+      ],
+      fields2: [
         {
           ...textboxData,
           type: "textbox",
-          label: "Last Name",
+          "label-text": "Name",
+          "optional-text": "",
+          placeholder: "",
+          "hint-text": "",
           id: "lastName",
           required: true,
         },
         {
           ...textboxData,
           type: "textbox",
-          label: "Email",
+          "label-text": "Email",
+          "optional-text": "",
+          placeholder: "",
+          "hint-text": "",
           id: "email",
           inputType: "email",
           required: true,
         },
+        {
+          ...textboxData,
+          type: "textbox",
+          "label-text": "Phone",
+          "optional-text": "",
+          placeholder: "",
+          "hint-text": "",
+          id: "phone",
+          inputType: "phone",
+          required: true,
+        },
         {
           ...selectData,
           type: "select",
-          label: "Enquiry Type",
+          "label-text": "Enquiry Type",
+          "optional-text": "",
+          "hint-text": "",
           id: "enquiryType",
         },
         {
-          ...textareaData,
-          type: "textarea",
-          label: "Message",
-          id: "message",
-          required: true,
-        },
-        {
-          ...checkboxData,
           type: "checkbox",
-          questionLabel: "Services Required",
+          questionLabel: "Privacy acknowledgement",
+          listClasses: "field-required",
           listitems: [
             {
               type: "checkbox",
               id: "service1",
-              name: "services",
-              label: "Website Development",
-              value: "website",
-              isDisabled: false
-            },
-            {
-              type: "checkbox",
-              id: "service2",
-              name: "services",
-              label: "Mobile App Development",
-              value: "mobile",
-              isDisabled: false
+              name: "Privacy acknowledgement",
+              label: "I have read and understood the privacy statement",
+              value: "checked",
+              isDisabled: false,
             },
-            {
-              type: "checkbox",
-              id: "service3",
-              name: "services",
-              label: "Consulting",
-              value: "consulting",
-              isDisabled: false
-            }
-          ]
-        },
-        {
-          ...radioData,
-          type: "radio",
-          questionLabel: "Preferred Contact Method",
-          listitems: [
-            {
-              type: "radio",
-              id: "contact1",
-              name: "contactMethod",
-              label: "Email",
-              value: "email",
-              isDisabled: false
-            },
-            {
-              type: "radio",
-              id: "contact2",
-              name: "contactMethod",
-              label: "Phone",
-              value: "phone",
-              isDisabled: false
-            },
-            {
-              type: "radio",
-              id: "contact3",
-              name: "contactMethod",
-              label: "SMS",
-              value: "sms",
-              isDisabled: false
-            }
-          ]
+          ],
         },
       ],
       buttons: [

package/src/components/bs5/pageLayout/templates/contentPageWithForm.hbs

@@ -5,7 +5,6 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{{title}}</title>
-    {{> head }}
 </head>
 
 <body>
@@ -18,44 +17,76 @@
     {{/if}}
 
     <main>
-        <div class="container-fluid">
-            <div class="container qld-content">
-                {{#if breadcrumbs}}
-                <div class="row">
-                    <div class="col-12">
-                        {{> breadcrumbs breadcrumbs}}
-                    </div>
+        <div class="container mt-40 mt-lg-64">
+            {{#if breadcrumbs}}
+            <div class="row">
+                <div class="col-12">
+                    {{> breadcrumbs breadcrumbs}}
+                </div>
+            </div>
+            {{/if}}
+
+            <div class="row">
+                {{#if sidenav}}
+                <!-- Side navigation Col -->
+                <div class="col-12 col-lg-3 mt-5 mt-lg-0">
+                    {{> sidenav sidenav}}
                 </div>
                 {{/if}}
 
-                <div class="row">
-                    <div class="col-lg-8 mx-auto">
-                        <div class="content-section">
-                            {{{content}}}
+                <!-- Content Col -->
+                <div class="col-lg-8 col-md-7 ps-1 ps-md-32">
+
+                    <!-- Main Content Sections -->
+                    <div class="content-section mb-5 px-1 px-md-32">
+
+                        <h1 id="section-heading">Single page form (H1)</h1>
+                        <p>
+                            Your feedback is important to us. It tells us how we can improve and what we’re doing well. Your feedback is confidential.
+                        </p> 
+                        
+                        <h2 id="form-heading">Enquiry form (H2)</h2>
+
+                        {{#if inpageAlert}}
+                        <!-- Inpage Alert -->
+                        <div class="mb-32">
+                            {{> inpageAlert inpageAlert}}
+                        </div>
+                        {{/if}}
+
+                        <div class="mb-32">
+                            <p>Any information submitted using this form will be used in line with our privacy statement.</p>
+                            <p>Required fields are marked with an *</p>
                         </div>
 
                         {{#if form}}
                         <form class="qld-form mb-5">
-                            {{#each form.fields}}
-                            <div class="form-group mb-3">
+                            {{#each form.fields1}}
+                            <div class="form-group mb-32">
                                 {{#ifCond type '==' 'textbox'}}
                                 {{> textbox this}}
                                 {{else ifCond type '==' 'textarea'}}
                                 {{> textarea this}}
+                                {{else ifCond type '==' 'radio'}}
+                                {{> formcheck this}}
+                                {{/ifCond}}
+                            </div>
+                            {{/each}}
+
+                            <h3 id="form-heading">Contact details (H3)</h3>
+
+                            {{#each form.fields2}}
+                            <div class="form-group mb-32">
+                                {{#ifCond type '==' 'textbox'}}
+                                {{> textbox this}}
                                 {{else ifCond type '==' 'select'}}
                                 {{> select this}}
-                                {{else ifCond type '==' 'dateinput'}}
-                                {{> dateinput this}}
-                                {{else ifCond type '==' 'formcheck'}}
-                                {{> formcheck this}}
                                 {{else ifCond type '==' 'checkbox'}}
                                 {{> formcheck this}}
-                                {{else ifCond type '==' 'radio'}}
-                                {{> formcheck this}}
                                 {{/ifCond}}
                             </div>
                             {{/each}}
-
+                            
                             {{#if form.buttons}}
                             <div class="form-actions d-flex mt-5 gap-4">
                                 {{#each form.buttons}}
@@ -66,9 +97,9 @@
                         </form>
                         {{/if}}
 
-                        {{> contentFooter contentFooter}}
                     </div>
                 </div>
+                {{> contentFooter contentFooter}}
             </div>
         </div>
     </main>