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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qld-gov-au/qgds-bootstrap5",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "description": "",
   "repository": {
     "type": "git",

package/src/components/bs5/card/card.scss

@@ -226,11 +226,12 @@ $view-all-icon-dark: url("data:image/svg+xml,<svg width='21' height='21' viewBox
 
         a {
             color: var(--#{$prefix}card-link-color);
-            text-decoration: none;
+            font-weight: 600;
+            text-underline-offset: 3px;
 
             &:hover, &:focus {
                 text-decoration: underline;
-                text-underline-offset: 3px;
+                text-decoration-thickness: 3px;
             }
         }
     }
@@ -429,6 +430,16 @@ $view-all-icon-dark: url("data:image/svg+xml,<svg width='21' height='21' viewBox
     }
 }
 
+.card-feature {
+    .card-title {
+        a {
+            &:hover, &:focus {
+                text-decoration-thickness: 4px;
+            }
+        }
+    }
+}
+
 @include media-breakpoint-up(md) {
     .card {
         &-feature {

package/src/components/bs5/correctincorrect/correctincorrect.scss

@@ -68,55 +68,45 @@
 
 .qg-correct, .qg-incorrect {
     position: relative;
-  
-    margin: 0.4em 0;
-    padding: 10px 10px 10px 45px !important;
-            //border-style: solid;
-        border-width: 1px;
-        border-radius: 5px;
-        border-left-width: 7px;
-      
-        vertical-align: top;
-        
-        > :first-child { // only one first child
-            margin-top: -0.5em;
-            margin-bottom: 1em;
-            padding-top: 0.7em;
-    
-            &:before {
-                position: absolute;
-        
-                width: 20px;
-                height: 20px;
-                text-align: center;
-                }
-        }
-        > :not(first-child) {
-            flex: none;
-        }
-        > * {
-          overflow-wrap: break-word;
-          word-wrap: break-word;
-        }
-
-    border-width: 1px;
-    border-left-width: 7px;
-  
+    margin: 0.4rem 0;
+    padding: 1rem 1rem 1rem 3rem !important;
+    border-radius: 4px;
     vertical-align: top;
+
+      > :only-child { 
+        margin-bottom: 0;
+      }
         
-    // table & {
+      > :first-child {
         &:before {
-        position: absolute;
-        top: 0.7em;
-        left: 1em;
+          position: absolute;
+          width: 20px;
+          height: 20px;
+          text-align: center;
+          }
+      }
+
+      > :last-child { 
+        margin-bottom: 0;
+      }
 
+      > :not(first-child) {
+          flex: none;
+      }
+
+      > * {
+        overflow-wrap: break-word;
+        word-wrap: break-word;
+      }
+   
+      &:before {
+        position: absolute;
+        top: 1.2rem;
+        left: 1rem;
         width: 20px;
         height: 20px;
         text-align: center;
-        }
-      // }
-
-   
+      }
 
   }
   
@@ -150,40 +140,44 @@
   }
   
   span.qg-correct, span.qg-incorrect {
-    display: inline-block;
-    max-width: 48%;
+    display: block;
   }
   
   .table > tbody > tr, table {
     td.qg-correct {
       @extend .qg-correct;
+      padding: 0.75rem 0.75rem 0.75rem 3rem !important;
+      &:before {
+        top: 0.9rem;
+      }
     }
     td.qg-incorrect {
       @extend .qg-incorrect;
-    }
-    td.qg-correct, td.qg-incorrect {
-      border-left-width: 3px;
+      padding: 0.75rem 0.75rem 0.75rem 3rem !important;
+      &:before {
+        top: 0.9rem;
+      }
     }
   }
   
   .table.qg-correct-incorrect > tbody > tr, table.qg-correct-incorrect {
     td:nth-child(odd) {
       @extend .qg-correct;
-      border-left-width: 3px;
+      //border-left-width: 3px;
     }
     td:nth-child(even) {
       @extend .qg-incorrect;
-      border-left-width: 3px;
+      //border-left-width: 3px;
     }
   }
 
   .table.qg-incorrect-correct > tbody > tr, table.qg-incorrect-correct {
     td:nth-child(even) {
       @extend .qg-correct;
-      border-left-width: 3px;
+      //border-left-width: 3px;
     }
     td:nth-child(odd) {
       @extend .qg-incorrect;
-      border-left-width: 3px;
+      //border-left-width: 3px;
     }
   }

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

@@ -16,12 +16,13 @@ export default {
 
 export const ShortForm = {
   render: () => {
-    return `<span class="qg-correct">
-        Does not currently exist <a href='#'>www.qld.gov.au/CycloneXena</a>
-      </span>
-      <span class="qg-incorrect">
-        <p>Is an already existing page <a href='#'>www.qld.gov.au/recreation</a></p>
-      </span>`
+    return `
+    <span class="qg-correct">
+      <p>Lorem ipsum dolor sit amet, consectetur <a href='#'>adipiscing elit</a>.</p>
+    </span>
+    <span class="qg-incorrect">
+      <p>Lorem ipsum dolor sit amet, consectetur <a href='#'>adipiscing elit</a>.</p>
+    </span>`
   },
 }
 
@@ -29,14 +30,16 @@ export const LongForm = {
   render: () => {
     return `
     <div class="qg-correct">
-      <p><a href='#'>www.qld.gov.au/e10ok</a> contains only letters and numbers</p>
-      <p><a href='#'>www.qld.gov.au/CrossRiverRail</a> uses camel case to improve readability (Note: The actual link is not case sensitive and there may be instances where the URL is displayed in lowercase.)</p> <p><a href='#'>www.qld.gov.au/starting-a-cafe</a> is clear as the letter 'a' in the middle may be overlooked or confused as a single word</p>
+      <p>Lorem ipsum dolor sit amet, consectetur <a href='#'>adipiscing elit</a>.</p>
+      <p>Lorem ipsum dolor sit amet, consectetur <a href='#'>adipiscing elit</a>. Fusce dictum efficitur egestas. </p>
+      <p>Lorem ipsum dolor sit amet, consectetur <a href='#'>adipiscing elit</a>. Fusce dictum efficitur egestas. Aenean sed pretium mauris. </p>
+      <p>Lorem ipsum dolor sit amet, consectetur <a href='#'>adipiscing elit</a>. Fusce dictum efficitur egestas. Aenean sed pretium mauris. Quisque euismod in nisl et consequat.</p>
     </div>
     <div class="qg-incorrect">
-      <p><a href='#'>www.qld.gov.au/$200rebate</a> contains a dollar sign</p>
-      <p><a href='#'>www.qld.gov.au/local parks</a> contains a space</p>
-      <p><a href='#'>www.qld.gov.au/under_scores</a> contains an underscore</p>
-      <p><a href='#'>www.qld.gov.au/water-ways-and-the-environment</a> excessively uses hyphens, which may make the URL less memorable</p>
+      <p>Lorem ipsum dolor sit amet, consectetur <a href='#'>adipiscing elit</a>.</p>
+      <p>Lorem ipsum dolor sit amet, consectetur <a href='#'>adipiscing elit</a>. Fusce dictum efficitur egestas. </p>
+      <p>Lorem ipsum dolor sit amet, consectetur <a href='#'>adipiscing elit</a>. Fusce dictum efficitur egestas. Aenean sed pretium mauris. </p>
+      <p>Lorem ipsum dolor sit amet, consectetur <a href='#'>adipiscing elit</a>. Fusce dictum efficitur egestas. Aenean sed pretium mauris. Quisque euismod in nisl et consequat.</p>
     </div>`
   },
 }
@@ -46,14 +49,13 @@ export const TableByColumnsForCorrectAndIncorrect = {
   args: {
     "customClass": "",
     "variantClass": "qg-correct-incorrect",
-    "headers": ["Header", "Header"],
+    "headers": ["This", "Not this"],
     "rows": [
-      { "cells": ["Cell", "Cell"] },
-      { "cells": ["Cell", "Cell"] },
-      { "cells": ["Cell", "Cell"] },
-      { "cells": ["Cell", "Cell"] },
-      { "cells": ["Cell", "Cell"] },
-      { "cells": ["Cell", "Cell"] },
+      { "cells": ["Cell", "Sell"] },
+      { "cells": ["Lorem ipsum dolor", "Lorem ipsum jolor"] },
+      { "cells": ["Lorem ipsum dolor sit", "Lorem ipsum dolor cit"] },
+      { "cells": ["Lorem ipsum dolor sit amet", "Lorem ipsum dolor sit amat"] },
+      { "cells": ["Lorem ipsum dolor sit amet consectetur", "Lorem ipsum dolor sit amet nonsectetur"] },
     ],
   }
   ,
@@ -65,14 +67,13 @@ export const TableByColumnsForIncorrectAndCorrect = {
   args: {
     "customClass": "",
     "variantClass": "qg-incorrect-correct",
-    "headers": ["Header", "Header"],
+    "headers": ["Not this", "This"],
     "rows": [
-      { "cells": ["Cell", "Cell"] },
-      { "cells": ["Cell", "Cell"] },
-      { "cells": ["Cell", "Cell"] },
-      { "cells": ["Cell", "Cell"] },
-      { "cells": ["Cell", "Cell"] },
-      { "cells": ["Cell", "Cell"] },
+      { "cells": ["Sell","Cell"] },
+      { "cells": ["Lorem ipsum jolor", "Lorem ipsum dolor"] },
+      { "cells": ["Lorem ipsum dolor cit", "Lorem ipsum dolor sit"] },
+      { "cells": ["Lorem ipsum dolor sit amat", "Lorem ipsum dolor sit amet"] },
+      { "cells": ["Lorem ipsum dolor sit amet nonsectetur", "Lorem ipsum dolor sit amet consectetur"] },
     ],
   }
   ,
@@ -103,10 +104,10 @@ export const TableByCell = {
                 </tr>
                 <tr class="">
                     <td>Cell</td>
-                    <td class="qg-incorrect">Cell</td>
+                    <td class="qg-correct">Cell</td>
                 </tr>
                 <tr class="">
-                  <td class="qg-correct">Cell</td>
+                  <td class="qg-incorrect">Cell</td>
                     <td>Cell</td>
                 </tr>
             </tbody>

package/src/components/bs5/tag/tag.scss

@@ -6,92 +6,165 @@
     flex-wrap: wrap;
     margin: 0.5rem 0;
     padding: 30px;
-    &.tag-default {
-        .tag-item {
-            border-color: $qld-light-grey;
+
+    .tag-item {
+        border-color: $qld-light-grey;
+        color: $qld-dark-grey-muted;
+    }
+
+    .tag-item {
+        margin: 0 0.5rem 0.5rem 0;
+        list-style-type: none;
+        display: inline-block;
+        border-radius: 16px;
+        padding: 0 0.5rem;
+        border-width: 1px;
+        border-style: solid;
+        font-size: 0.875rem;
+        line-height: 1.5rem;
+        text-align: center;
+
+        &:focus-within {
+            outline: 2px solid var(--qld-focus-color);
+            outline-offset: 2px;
+            border-radius: 16px;
+        }
+
+        &.tag-large {
+            margin: 0 1rem 1rem 0;
+            line-height: 1.5;
+            font-size: 1rem;
+            padding: 0.5rem 1rem;
+            border-radius: 32px;
+        }
+
+        &.tag-link {
+            color: $qld-sapphire-blue;
+            border-color: $qld-sapphire-blue;
+
+            a {
+                text-decoration: none;
+
+                &:focus {
+                    outline: none;
+                }
+            }
+
+            &:hover,
+            &:active,
+            &:focus {
+                background-color: $qld-textbox-border-color;
+
+                a {
+                    color: white;
+                    text-decoration: underline;
+                }
+            }
+        }
+
+        &.tag-link:not(.tag-large) {
+
+            &:hover,
+            &:active,
+            &:focus {
+                text-underline-offset: 0.1rem;
+            }
+        }
+
+        &.tag-info {
             color: $qld-dark-grey-muted;
+            border: 0;
+            background-color: $qld-extra-light-grey;
         }
     }
+
     &.tag-dark {
         background-color: $qld-sapphire-blue;
+
         .tag-item {
             color: $qld-dark-text;
         }
+
+        .tag-link {
+            color: $qld-white;
+            border-color: $qld-white;
+
+            a {
+                color: white;
+            }
+
+            &:hover,
+            &:active,
+            &:focus {
+                background-color: $qld-light-green-dark;
+                border-color: $qld-light-green-dark;
+
+                a {
+                    color: $qld-text-darkest;
+                }
+            }
+        }
+
+        .tag-info {
+            background-color: $qld-color-dark-background--shade;
+        }
     }
+
     &.tag-alt {
         background-color: $qld-light-grey-alt;
+
         .tag-item {
             color: $qld-dark-grey-muted;
             border-color: $qld-soft-grey;
         }
+
+        .tag-link:hover,
+        .tag-link:active,
+        .tag-link:focus {
+            color: $qld-white !important;
+        }
+
+        .tag-link {
+            color: $qld-sapphire-blue;
+            border-color: $qld-sapphire-blue;
+        }
     }
+
     &.tag-dark-alt {
         background-color: $qld-dark-blue;
+
         .tag-item {
+            a {
+                color: $qld-dark-text;
+            }
+
             color: $qld-dark-text;
             border-color: $qld-dark-border;
         }
-    }
-}
 
-.tag-item {
-    margin: 0 0.5rem 0.5rem 0;
-    list-style-type: none;
-    display: inline-block;
-    border-radius: 16px;
-    padding: 0 0.5rem;
-    border-width: 1px;
-    border-style: solid;
-    font-size: 0.875rem;
-    line-height: 1.5rem;
-    text-align: center;
-    &:focus-within {
-        outline: 2px solid var(--qld-focus-color);
-        outline-offset: 2px;
-        border-radius: 16px;
-    }
-    &.tag-large {
-        margin: 0 1rem 1rem 0;
-        line-height: 1.5;
-        font-size: 1rem;
-        padding: 0.5rem 1rem;
-        border-radius: 32px;
-    }
-    &.tag-link {
-        color: $qld-sapphire-blue;
-        border-color: $qld-sapphire-blue;
-        a {
-            text-decoration: none;
-            &:focus {
-                outline: none;
-            }
+        .tag-info {
+            background-color: $qld-dark-blue-shade;
         }
-        &:hover,
-        &:active,
-        &:focus {
-            background-color: $qld-textbox-border-color;
-            a {
-                color: white;
-                text-decoration: underline;
+
+        .tag-link {
+
+            &:hover,
+            &:active,
+            &:focus {
+                background-color: $qld-light-green-dark;
+                border-color: $qld-light-green-dark;
+
+                a {
+                    color: $qld-text-darkest;
+                }
             }
         }
     }
-    &.tag-link:not(.tag-large) {
-        &:hover,
-        &:active,
-        &:focus {
-            text-underline-offset: 0.1rem;
-        }
-    }
-    &.tag-info {
-        color: $qld-dark-grey-muted;
-        border-color: $qld-extra-light-grey;
-        background-color: $qld-extra-light-grey;
-    }
 }
 
 $close-icon: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' d='M180.7 180.7C186.9 174.4 197.1 174.4 203.3 180.7L256 233.4L308.7 180.7C314.9 174.4 325.1 174.4 331.3 180.7C337.6 186.9 337.6 197.1 331.3 203.3L278.6 256L331.3 308.7C337.6 314.9 337.6 325.1 331.3 331.3C325.1 337.6 314.9 337.6 308.7 331.3L256 278.6L203.3 331.3C197.1 337.6 186.9 337.6 180.7 331.3C174.4 325.1 174.4 314.9 180.7 308.7L233.4 256L180.7 203.3C174.4 197.1 174.4 186.9 180.7 180.7zM512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256zM256 32C132.3 32 32 132.3 32 256C32 379.7 132.3 480 256 480C379.7 480 480 379.7 480 256C480 132.3 379.7 32 256 32z'/%3E%3C/svg%3E";
 $close-icon-hover: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' d='M0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256zM175 208.1L222.1 255.1L175 303C165.7 312.4 165.7 327.6 175 336.1C184.4 346.3 199.6 346.3 208.1 336.1L255.1 289.9L303 336.1C312.4 346.3 327.6 346.3 336.1 336.1C346.3 327.6 346.3 312.4 336.1 303L289.9 255.1L336.1 208.1C346.3 199.6 346.3 184.4 336.1 175C327.6 165.7 312.4 165.7 303 175L255.1 222.1L208.1 175C199.6 165.7 184.4 165.7 175 175C165.7 184.4 165.7 199.6 175 208.1V208.1z'/%3E%3C/svg%3E";
+
 .close-icon {
     mask-image: url($close-icon);
     background-color: $qld-dark-green;
@@ -101,6 +174,7 @@ $close-icon-hover: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'
     border: none;
     margin-left: 0.5rem;
     cursor: pointer;
+
     &:hover {
         background-color: $qld-alt-button-hover;
         mask-image: url($close-icon-hover);

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

@@ -28,9 +28,9 @@ export const Default = {
   args: defaultdata.default,
 };
 
-// Large Tag story
-export const Large = {
-  args: defaultdata.large,
+// Info Tag story
+export const Information = {
+  args: defaultdata.info,
 };
 
 // Action Tag story
@@ -38,17 +38,17 @@ export const Action = {
   args: defaultdata.action,
 };
 
-// Dark Tag story
-export const Dark = {
-  args: defaultdata.dark,
+// Filter Tag story
+export const Filter = {
+  args: defaultdata.filter,
 };
 
-// Info Tag story
-export const Information = {
-  args: defaultdata.info,
+// Large Tag story
+export const Large = {
+  args: defaultdata.large,
 };
 
-// Filter Tag story
-export const Filter = {
-  args: defaultdata.filter,
+// Dark Tag story
+export const Dark = {
+  args: defaultdata.dark,
 };