@qhealth-design-system/core 1.15.2 → 1.16.0

package/.storybook/globals.js

@@ -3,13 +3,22 @@ export const viewports = {
     small: { name: "Small", styles: { width: "400px", height: "800px" } },
     medium: { name: "Medium", styles: { width: "699px", height: "800px" } },
     large: { name: "Large", styles: { width: "992px", height: "800px" } },
-    xlarge: { name: "Extra large", styles: { width: "1312px", height: "1000px" } },
-    xxlarge: { name: "Extra extra large", styles: { width: "1599px", height: "1000px" } },
-    mainNavBreakpoint: { name: "Main nav breakpoint", styles: { width: "992px", height: "800px" } },
+    xlarge: {
+        name: "Extra large",
+        styles: { width: "1312px", height: "1000px" },
+    },
+    xxlarge: {
+        name: "Extra extra large",
+        styles: { width: "1599px", height: "1000px" },
+    },
+    mainNavBreakpoint: {
+        name: "Main nav breakpoint",
+        styles: { width: "992px", height: "800px" },
+    },
 };
 
 export const themes = {
-    white: "qld__body",
+    white: "qld__body qld__grid",
     light: "qld__body qld__body--light qld__light",
     "light alt": "qld__body qld__body--alt qld__light-alt",
     dark: "qld__body qld__body--dark qld__dark",
@@ -43,4 +52,19 @@ export const figmaLinks = {
         file: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=23167-395571&t=nEqRcloGJuj1X51X-0",
         ds: "https://www.designsystem.qld.gov.au/components/input-fields-select-box",
     },
+    videoPlayer: {
+        design: "https://www.figma.com/design/twruQlAG4NzIQl1hgjK8HS/QH-QGDS-185--Video-Component-Update?node-id=2074-8711&p=f&t=7NFZrbjBSzKMVAcZ-0",
+        file: "https://www.figma.com/design/twruQlAG4NzIQl1hgjK8HS/QH-QGDS-185--Video-Component-Update?node-id=2074-8711&p=f&t=7NFZrbjBSzKMVAcZ-0",
+        ds: "https://www.designsystem.qld.gov.au/components",
+    },
+    directionLinks: {
+        design: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=11056-321363&p=f",
+        file: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=23167-395560",
+        ds: "https://www.designsystem.qld.gov.au/components/direction-links",
+    },
+    linkColumns: {
+        design: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=11056-321574&p=f",
+        file: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=23167-395563",
+        ds: "https://www.designsystem.qld.gov.au/components/link-columns-link-list",
+    },
 };

package/CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+## 1.16.0 - 2025-07-10
+
+## 1.15.3 - 2025-05-29
+
 ## 1.15.2 - 2025-05-22
 
 ## 1.15.1 - 2025-05-22

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@qhealth-design-system/core",
-    "version": "1.15.2",
+    "version": "1.16.0",
     "description": "",
     "licence": "MIT",
     "main": "index.js",
@@ -14,7 +14,8 @@
         "lint:styles": "stylelint \"./src/**/*.css\" \"./src/**/*.scss\" \"!./src/**/*.min.css\"",
         "lint": "npm run lint:js && npm run lint:styles",
         "build-storybook": "node .storybook/prepare-storybook.js && storybook build",
-        "storybook": "storybook dev -p 6006"
+        "storybook": "storybook dev -p 6006",
+        "add-story": "bash scripts/add_story.sh"
     },
     "keywords": [],
     "author": "",

package/src/components/_global/css/btn/component.scss

@@ -526,21 +526,17 @@
             @include QLD-space(padding, 0.75unit 1.5unit);
         }
 
-        &:active:focus {
-            .qld__btn__icon {
-                background-color: var(--QLD-color-light__heading);
-            }
-        }
-
         .qld__btn__icon {
             display: block;
-            @include QLD-space(width, 1.25unit);
-            @include QLD-space(height, 1.25unit);
+            @include QLD-space(width, 1.5unit);
+            @include QLD-space(height, 1.5unit);
             transition: transform 0.25s ease-in;
-            mask-image: QLD-svguri($QLD-icon-search);
-            mask-repeat: no-repeat;
-            mask-position: center;
-            background-color: var(--QLD-color-light__link--on-action);
+
+            svg.qld__icon {
+                vertical-align: baseline;
+                height: 100%;
+                width: 100%;
+            }
 
             @include QLD-media(lg) {
                 display: none;
@@ -564,24 +560,8 @@
             }
         }
     }
-
-    &.qld__body--dark,
-    &.qld__body--dark-alt,
-    &.qld__banner--dark,
-    &.qld__banner--dark-alt,
-    &.qld__header__main--dark,
-    &.qld__header__main--dark-alt,
-    &.qld__footer--dark,
-    &.qld__footer--dark-alt {
-        .qld__btn.qld__btn--search,
-        a.qld__btn.qld__btn--search,
-        a.qld__btn.qld__btn--search:visited {
-            .qld__btn__icon {
-                background-color: var(--QLD-color-dark__link--on-action);
-            }
-        }
-    }
 }
+
 /**
 * Close Button
 */

package/src/components/_global/css/direction_links/component.scss

@@ -2,184 +2,129 @@
 // Direction Links
 //--------------------------------------------------------------------------------------------------------------------------------------------------------------
 
-.qld__direction-link,
-a.qld__direction-link{
-
-	&--left{
-		&:before {
-			@include QLD-space( width, 1unit );
-			@include QLD-space( height, 1.5unit );
-			@include QLD-space( margin, 0 0.5unit 0 0.25unit );
-			content: '';
-			color: var(--QLD-color-light__action--secondary);
-			display: inline-block;
-			// background-repeat: no-repeat;
-			// background-size: contain;
-			// background-position: center;
-			vertical-align: text-top;
-			// background-image: QLD-svg-with-fill($QLD-icon-arrow-left, var(--QLD-color-light__action--secondary));
-			mask-image: QLD-svguri($QLD-icon-arrow-left);
-			mask-repeat: no-repeat;
-			mask-position: center;
-			background-color: var(--QLD-color-light__action--secondary);
-		}
-
-		&:disabled,
-		&[disabled] {
-			background-color: transparent;
-			border-color: transparent;
-			color: var(--QLD-color-light__text--lighter);
-			&::before{
-				// background-image: QLD-svg-with-fill($QLD-icon-arrow-left, var(--QLD-color-light__text--lighter));
-				background-color: var(--QLD-color-light__text--lighter);
-			}
-		}
-	}
-
-	&--right{
-		&:after {
-			@include QLD-space( width, 1unit );
-			@include QLD-space( height, 1.5unit );
-			@include QLD-space( margin, 0 0.25unit 0 0.5unit );
-			content: '';
-			color: var(--QLD-color-light__action--secondary);
-			display: inline-block;
-			// background-repeat: no-repeat;
-			// background-size: contain;
-			// background-position: center;
-			vertical-align: text-top;
-			// background-image: QLD-svg-with-fill($QLD-icon-arrow-right, var(--QLD-color-light__action--secondary));
-			mask-image: QLD-svguri($QLD-icon-arrow-right);
-			mask-repeat: no-repeat;
-			mask-position: center;
-			background-color: var(--QLD-color-light__action--secondary);
-			
-		}
-
-		&:disabled,
-		&[disabled] {
-			background-color: transparent;
-			border-color: transparent;
-			color: var(--QLD-color-light__text--lighter);
-			&::after{
-				// background-image: QLD-svg-with-fill($QLD-icon-arrow-left, var(--QLD-color-light__text--lighter));
-				background-color: var(--QLD-color-light__text--lighter);
-			}
-		}
-	}
-
-	&--up{
-		&:after {
-			@include QLD-space( width, 1unit );
-			@include QLD-space( height, 1.5unit );
-			@include QLD-space( margin, 0 0.25unit 0 0.5unit );
-			content: '';
-			color: var(--QLD-color-light__action--secondary);
-			display: inline-block;
-			// background-repeat: no-repeat;
-			// background-size: contain;
-			// background-position: center;
-			vertical-align: text-top;
-			// background-image: QLD-svg-with-fill($QLD-icon-arrow-up, var(--QLD-color-light__action--secondary));
-			mask-image: QLD-svguri($QLD-icon-arrow-up);
-			mask-repeat: no-repeat;
-			mask-position: center;
-			background-color: var(--QLD-color-light__action--secondary);
-		}
-
-		&:disabled,
-		&[disabled] {
-			background-color: transparent;
-			border-color: transparent;
-			color: var(--QLD-color-light__text--lighter);
-			&::after{
-				// background-image: QLD-svg-with-fill($QLD-icon-arrow-left, var(--QLD-color-light__text--lighter));
-				background-color: var(--QLD-color-light__text--lighter);
-			}
-		}
-	}
-
-	&--down{
-		&:after {
-			@include QLD-space( width, 1unit );
-			@include QLD-space( height, 1.5unit );
-			@include QLD-space( margin, 0 0.25unit 0 0.5unit );
-			content: '';
-			color: var(--QLD-color-light__action--secondary);
-			display: inline-block;
-			// background-repeat: no-repeat;
-			// background-size: contain;
-			// background-position: center;
-			vertical-align: text-top;
-			// background-image: QLD-svg-with-fill($QLD-icon-arrow-down, var(--QLD-color-light__action--secondary));
-			mask-image: QLD-svguri($QLD-icon-arrow-down);
-			mask-repeat: no-repeat;
-			mask-position: center;
-			background-color: var(--QLD-color-light__action--secondary);
-		}
-
-		&:disabled,
-		&[disabled] {
-			background-color: transparent;
-			border-color: transparent;
-			color: var(--QLD-color-light__text--lighter);
-
-			&::after{
-				// background-image: QLD-svg-with-fill($QLD-icon-arrow-down, var(--QLD-color-light__text--lighter));
-				background-color: var(--QLD-color-light__text--lighter);
-			}
-		}
-	}
-
-	.qld__body--dark &,
-	.qld__body--dark-alt &{
-		&--left{
-			&:before {
-				// background-image: QLD-svg-with-fill($QLD-icon-arrow-left, var(--QLD-color-dark__action--secondary));
-				background-color: var(--QLD-color-dark__action--secondary);
-			}
-		}
-		&--right{
-			&:after {
-				// background-image: QLD-svg-with-fill($QLD-icon-arrow-right, var(--QLD-color-dark__action--secondary));
-				background-color: var(--QLD-color-dark__action--secondary);
-			}
-		}
-		&--up{
-			&:after {
-				// background-image: QLD-svg-with-fill($QLD-icon-arrow-up, var(--QLD-color-dark__action--secondary));
-				background-color: var(--QLD-color-dark__action--secondary);
-			}
-		}
-		&--down{
-			&:after {
-				// background-image: QLD-svg-with-fill($QLD-icon-arrow-down, var(--QLD-color-dark__action--secondary));
-				background-color: var(--QLD-color-dark__action--secondary);
-			}
-		}
-	}
-
+$icon-scale: 1;
+$icon-arrow-head-width: 0.6rem;
+$icon-arrow-stroke-width: 0.125rem;
+$icon-arrow-body-length: 1rem;
+$icon-gap-from-text: 1.75rem;
+
+a.qld__direction-link {
+    &--right,
+    &--left,
+    &--up,
+    &--down {
+        position: relative;
+        display: inline-block;
+        border-radius: $QLD-border-radius-xs;
+
+        &::before {
+            width: $icon-arrow-body-length;
+        }
+
+        &::after {
+            width: $icon-arrow-head-width;
+            height: $icon-arrow-head-width;
+            border-right: $icon-arrow-stroke-width solid;
+        }
+
+        &::before,
+        &::after {
+            content: "";
+            position: absolute;
+            display: inline-block;
+            box-sizing: border-box;
+            border-bottom: $icon-arrow-stroke-width solid;
+            transition: border-color 0.3s ease;
+            border-color: var(--QLD-color-light__action--secondary);
+
+            .qld__body--dark &,
+            .qld__body--dark-alt & {
+                border-color: var(--QLD-color-dark__action--secondary);
+            }
+        }
+    }
+
+    &--right {
+        padding-right: $icon-gap-from-text;
+
+        &::before {
+            top: 50%;
+            right: 0.3rem;
+            transform: scale($icon-scale);
+        }
+
+        &::after {
+            transform: rotate(315deg) scale($icon-scale);
+            top: 0.5rem;
+            right: 0.3rem;
+        }
+    }
+
+    &--left {
+        padding-left: $icon-gap-from-text;
+
+        &::before {
+            top: 50%;
+            left: 0.3rem;
+            transform: scale($icon-scale);
+        }
+
+        &::after {
+            top: 0.5rem;
+            left: 0.3rem;
+            transform: rotate(135deg) scale($icon-scale);
+        }
+    }
+
+    &--up {
+        padding-right: $icon-gap-from-text;
+
+        &::before {
+            top: 13px;
+            right: 5px;
+            transform: rotate(90deg) scale($icon-scale);
+        }
+
+        &::after {
+            top: 6px;
+            right: 8.25px;
+            transform: rotate(225deg) scale($icon-scale);
+        }
+    }
+
+    &--down {
+        padding-right: $icon-gap-from-text;
+
+        &::before {
+            top: 11.5px;
+            right: 5px;
+            transform: rotate(90deg) scale($icon-scale);
+        }
+
+        &::after {
+            top: 11px;
+            right: 8.45px;
+            transform: rotate(45deg) scale($icon-scale);
+        }
+    }
 }
 
 // Print styles
 @media print {
-	.qld__direction-link {
-		color: #000 !important;
-	}
-
-	.qld__direction-link__arrow--right:after {
-		content: '→' !important;
-	}
-
-	.qld__direction-link__arrow--left:before {
-		content: '←' !important;
-	}
-
-	.qld__direction-link__arrow--up:after {
-		content: '↑' !important;
-	}
-
-	.qld__direction-link__arrow--down:after {
-		content: '↓' !important;
-	}
+    a.qld__direction-link,
+    .qld__body--dark a.qld__direction-link,
+    .qld__body--dark-alt a.qld__direction-link {
+        color: $QLD-color-neutral--black;
+        text-decoration-color: $QLD-color-neutral--black;
+
+        &--right,
+        &--left,
+        &--up,
+        &--down {
+            &::before,
+            &::after {
+                border-color: $QLD-color-neutral--black;
+            }
+        }
+    }
 }