Develop

package.json

@@ -46,30 +46,30 @@
   "licence": "all rights reserved",
   "homepage": "http://www.qld.gov.au/",
   "devDependencies": {
-    "@babel/core": "^7.23.0",
-    "@babel/plugin-transform-runtime": "^7.22.15",
-    "@babel/preset-env": "^7.22.20",
-    "@storybook/addon-actions": "v7.4.6",
-    "@storybook/addon-essentials": "v7.4.6",
-    "@storybook/addon-interactions": "v7.4.6",
-    "@storybook/addon-links": "v7.4.6",
-    "@storybook/addon-mdx-gfm": "^7.4.6",
-    "@storybook/html": "v7.4.6",
-    "@storybook/html-webpack5": "^7.4.6",
+    "@babel/core": "^7.23.3",
+    "@babel/plugin-transform-runtime": "^7.23.3",
+    "@babel/preset-env": "^7.23.3",
+    "@storybook/addon-actions": "v7.5.3",
+    "@storybook/addon-essentials": "v7.5.3",
+    "@storybook/addon-interactions": "v7.5.3",
+    "@storybook/addon-links": "v7.5.3",
+    "@storybook/addon-mdx-gfm": "^7.5.3",
+    "@storybook/html": "v7.5.3",
+    "@storybook/html-webpack5": "^7.5.3",
     "@storybook/testing-library": "^0.2.2",
     "babel-loader": "^9.1.3",
-    "chromatic": "^7.2.2",
+    "chromatic": "^9.1.0",
     "chromium": "^3.0.3",
-    "concurrently": "^8.2.1",
+    "concurrently": "^8.2.2",
     "copy-webpack-plugin": "^11.0.0",
     "cssnano": "^6.0.1",
     "del": "^2.2.2",
-    "eslint": "^8.50.0",
+    "eslint": "^8.53.0",
     "eslint-config-semistandard": "^7.0.0",
     "eslint-config-standard": "^6.2.1",
     "eslint-html-reporter": "^0.7.4",
     "eslint-loader": "^4.0.2",
-    "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-import": "^2.29.0",
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-standard": "^5.0.0",
     "event-stream": "^4.0.1",
@@ -82,7 +82,7 @@
     "gulp-concat": "^2.6.1",
     "gulp-connect": "^5.7.0",
     "gulp-connect-ssi": "^0.4.0",
-    "gulp-debug": "^4.0.0",
+    "gulp-debug": "^5.0.1",
     "gulp-directory-sync": "^1.2.4",
     "gulp-eslint": "^6.0.0",
     "gulp-foreach": "^0.1.0",
@@ -108,20 +108,20 @@
     "jest-puppeteer": "^9.0.1",
     "node-ssi": "^0.3.2",
     "np": "^8.0.4",
-    "puppeteer": "^21.3.6",
+    "puppeteer": "^21.5.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "sass": "^1.68.0",
-    "storybook": "^7.4.6",
-    "storybook-addon-pseudo-states": "^2.1.1",
+    "sass": "^1.69.5",
+    "storybook": "^7.5.3",
+    "storybook-addon-pseudo-states": "^2.1.2",
     "string-replace-loader": "^3.1.0",
     "terser-webpack-plugin": "^5.3.9",
-    "webpack": "^5.88.2",
+    "webpack": "^5.89.0",
     "webpack-ssi-include-loader": "^1.6.1",
     "webpack-stream": "^7.0.0"
   },
   "dependencies": {
-    "@babel/runtime": "^7.23.1",
+    "@babel/runtime": "^7.23.2",
     "ajv": "^8.12.0",
     "bootstrap": "^4.6.2",
     "jquery": "^3.7.1",

src/assets/_project/_blocks/components/buttons/_qg-buttons.scss

@@ -84,27 +84,47 @@
 }
 
 .qg-btn {
+
+  --border-width: 3px; //Default buttons border width
+
   @extend .btn;
+
+  &.btn-global-primary,
+  &.btn-global-primary-white,
+  &.btn-primary,
+  &.btn-secondary,
+  &.btn-default {
+    border-width: var(--border-width);
+  }
+
   @include qg-button-outline-decoration($border-radius: $btn-border-radius-base);
   &.btn-outline-dark{
     color: $qg-outline-dark;
     background-color: transparent !important;
-    border: 3px solid $qg-outline-dark;
+    border: var(--border-width) solid $qg-outline-dark;
+
     @include on-hover-or-active {
       border-color: $qg-outline-dark-hover;
       color: $qg-global-primary-dark-grey;
     }
+
     @include qg-underline-on-highlight-decoration;
+
   }
+
   &.btn-outline-light{
     color: white !important;
     background-color: transparent !important;
-    border: 3px solid white;
+    border: var(--border-width) solid white;
+
     @include qg-underline-on-highlight-decoration;
+
   }
+
   &.btn-link.light{
     color: white;
   }
+
 }
 
 #body .qg-btn, #body .btn, body .qg-btn, body .btn {

src/assets/_project/_blocks/components/forms/_qg-forms.scss

@@ -295,11 +295,18 @@
     }
 
     .choices__item {
-      padding: 4px 10px;
       line-height: inherit;
       font-size: 1rem;
     }
 
+    .choices__list--dropdown .choices__item {
+      padding: 10px;
+    }
+
+    .choices__input {
+        padding: 10px !important;
+    }
+
     .choices__item.choices__item--selectable:not(.choices__item--choice) {
       background: $qg-global-primary-light-grey;
       border-radius: 6px;

src/assets/_project/_blocks/components/quick-exit/_qg-quick-exit.scss

@@ -33,6 +33,12 @@
       color: white;
       font-weight: 500
     }
+
+    .qg-tooltip__content {
+      p {
+        width: 150px;
+      }
+    }
     .qg-tooltip__parent {
       position: relative
     }

src/assets/_project/_blocks/components/tags/_qg-tags.scss

@@ -0,0 +1,47 @@
+.badge {
+    &.qg-tag {
+        font-weight: normal;
+        margin-right: 0.5rem;
+    }
+    &.qg-tag-grey {
+        background-color: $qg-tag-bg-grey;
+        color: $qg-tag-color-grey;
+    }
+
+    &.qg-tag-green {
+        background-color: $qg-tag-bg-green;
+        color: $qg-tag-color-green;
+    }
+
+    &.qg-tag-blue {
+        background-color: $qg-tag-bg-blue;
+        color: $qg-tag-color-blue;
+    }
+
+    &.qg-tag-purple {
+        background-color: $qg-tag-bg-purple;
+        color: $qg-tag-color-purple;
+    }
+
+    &.qg-tag-pink {
+        background-color: $qg-tag-bg-pink;
+        color: $qg-tag-color-pink;
+        font-weight: normal;
+    }
+
+    &.qg-tag-red {
+        background-color: $qg-tag-bg-red;
+        color: $qg-tag-color-red;
+        font-weight: normal;
+    }
+
+    &.qg-tag-orange {
+        background-color: $qg-tag-bg-orange;
+        color: $qg-tag-color-orange;
+    }
+
+    &.qg-tag-yellow {
+        background-color: $qg-tag-bg-yellow;
+        color: $qg-tag-color-yellow;
+    }
+}

src/assets/_project/_blocks/layout/_pagemodels/_index.scss

@@ -3,7 +3,7 @@
   @extend .flex-wrap;
   .qg-index-item.content-only{
     h2, p, ul, &> div &> span {
-      padding-left: 10px;
+      padding-left: 0;
     }
   }
 
@@ -75,10 +75,16 @@
     margin-left: 0;
     &> .qg-index-item{
       //width: 100%;
-      margin-bottom: 10px;
-      background: $qg-blue-green;
+      margin-bottom: 2rem !important;
       padding-left: 0 !important;
       padding-right: 0 !important;
+      border: solid 1px #d3d3d3;
+      border-radius: 4px;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+      @include qg-button-outline-decoration($border-radius: $btn-border-radius-base);
+      &:hover {
+        box-shadow: none;
+      }
     }
     h2 {
       padding: 0 !important;
@@ -87,16 +93,12 @@
         padding: 1em 1.5em 1em 1.5em !important;
         width: 100%;
         display: block;
-        @include qg-link-styles__theme-white(0);
-        &:hover {
-          background: #007eb1;
-        }
       }
       img {
         display: none;
       }
     }
-    p,ul{
+    p,ul {
       display: none;
     }
   }
@@ -106,9 +108,8 @@
 // of other index-links rules
 #qg-content #qg-primary-content .qg-index-links {
   h2 a, ul li a {
-    @include qg-link-styles__no-underline-default;
-    @include breakpoint(xs) {
-      @include qg-link-styles__theme-white(0);
+    @include media-breakpoint-up(sm) {
+      @include qg-link-styles__no-underline-default;
     }
   }
 }
@@ -124,10 +125,7 @@
 #qg-one-col, #qg-three-col, #qg-two-col-aside:not(.wide), #qg-two-col-nav:not(.wide) {
   .qg-index-links > .qg-index-item {
     @include media-breakpoint-up(sm) {
-      @include make-col(6);
-    }
-    &:nth-child(3) {
-      @include qg-index-item;
+      @include make-col(12); // Make the page one-col. Example: Topic Index page with an aside
     }
   }
 }
@@ -146,9 +144,9 @@
 #qg-two-col-aside.wide, #qg-two-col-nav.wide {
   .qg-index-links > .qg-index-item {
     @include media-breakpoint-up(sm) {
-      @include make-col(4);
+      @include make-col(6); // Make the page two-col. Example: Topic index page with no aside
     }
-    &:nth-child(4) {
+    &:nth-child(3) {
       @include qg-index-item;
     }
   }

src/assets/_project/_blocks/layout/asides/_asides.scss

@@ -30,19 +30,19 @@
 
     h2 {
       margin-top: 0;
+    }
+
+    h3 {
+      margin-top: 0;
       overflow: hidden;
-      color: $qg-aside-h2-color;
-      @include rem(font-size, 22px);
-      font-weight: bold;
 
       .fa {
         padding-right: .3em;
         color: $qg-icon-color;
         font-size: 1.3em;
       }
-
     }
-    h3 {
+    h3:not(.aside-heading) {
       color: $qg-dark-blue2;
     }
     p:last-child {

src/assets/_project/_blocks/layout/asides/aside-contact-qgov.html

@@ -1,5 +1,5 @@
     <div class="qg-aside qg-contact" role="complementary">
-        <h2><span class="fa fa-phone" aria-hidden="true"></span>Contact</h2>
+        <h3><span class="fa fa-phone" aria-hidden="true"></span>Contact</h3>
 
         <ul>
             <li class="telephone">General enquiries <span class="tel">13 QGOV (13 74 68)</span></li>

src/assets/_project/_blocks/layout/asides/aside-feedback-qgov.html

@@ -1,5 +1,5 @@
     <div class="qg-aside qg-feedback" role="complementary">
-        <h2><span class="fa fa-comments-o" aria-hidden="true"></span>Tell us what you think</h2>
+        <h3><span class="fa fa-comments-o" aria-hidden="true"></span>Tell us what you think</h3>
 
         <p><a href="#page-feedback-useful">Fill in the feedback section</a> and let us know what you think of the pages so far and what you would like to see in the future.</p>
     </div>

src/assets/_project/_blocks/layout/content/_options.scss

@@ -24,6 +24,14 @@
 
     &-item {
       margin-right: 22px;
+      &.twitter-list-item {
+        transform: scale(1.02);
+      }
+      .qg-share-twitter {
+        svg {
+          margin-top: -6px;
+        }
+      }
 
       &:last-child {
         margin-right: 0;
@@ -34,7 +42,7 @@
   &-link {
     .fa {
       @include rem(font-size, 24px);
-      color: #000;
+      color: $qg-dark-grey-dark;
       transition: color .25s ease;
     }
 
@@ -47,6 +55,14 @@
         color: $qg-twitter;
       }
 
+      .x-twitter-square {
+        svg {
+          rect {
+            fill: black;
+          }
+        }
+      }
+
       .fa-linkedin-square {
         color: $qg-linkedin;
       }

src/assets/_project/_blocks/layout/content/options.html

@@ -9,7 +9,12 @@
             </li>
             <li class="qg-share-list-item">
                 <a class="qg-share-link qg-share-twitter" href="#" title="Twitter" data-analytics-link-group="qg-sharing-twitter" aria-label="Share on Twitter">
-                    <span class="fa fa-twitter-square fa-2x qg-share-icon" aria-hidden="true"></span>
+                    <span class="x-twitter-square qg-share-icon" aria-hidden="true">
+                        <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <rect width="20.8" height="20.2138" rx="4" fill="#4a4a4a"/>
+                            <path d="M14.0404 4.3999H15.9964L11.7243 9.28158L16.75 15.9253H12.8158L9.73224 11.897L6.20812 15.9253H4.24935L8.81796 10.7029L4 4.3999H8.0339L10.8183 8.08194L14.0404 4.3999ZM13.3533 14.7562H14.4366L7.44377 5.50812H6.28015L13.3533 14.7562Z" fill="white"/>
+                        </svg>
+                    </span>
                     <span class="title qg-visually-hidden">Twitter</span>
                 </a>
             </li>