@qhealth-design-system/core 1.0.38

package/src/components/multi_column/js/manifest.json

@@ -0,0 +1,233 @@
+{
+    "component": {
+        "name": "Multi Column",
+        "description": "This component is designed to make it easy for publishers to create multi-column content using the 12 column grid system built into our design system.",
+        "version": "1.0",
+        "status": "Released",
+        "data": {
+            "assetid": "123",
+            "metadata": {
+                "body_background": {
+                    "type": "metadata_field_select",
+                    "description": "",
+                    "friendly_name": "Background colour",
+                    "value": "",
+                    "options": {
+						"": "Light",
+                        "qld__body--alt": "Alternate",
+                        "qld__body--dark": "Dark",
+                        "qld__body--dark-alt": "Alternate Dark"
+                    },
+                    "required": false,
+                    "editable": true
+                },
+                "intro_show": {
+                    "type": "metadata_field_select",
+                    "description": "",
+                    "friendly_name": "Show intro section?",
+                    "value": "yes",
+                    "options": {
+						"": "No",
+                        "yes": "Yes"
+                    },
+                    "required": false,
+                    "editable": true
+                },
+                "intro_width": {
+                    "type": "metadata_field_select",
+                    "description": "",
+                    "friendly_name": "Intro section width",
+                    "value": "col-lg-6",
+                    "options": {
+                        "col-lg-6": "Half width",
+                        "col-lg-12": "Full width"
+                    },
+                    "required": false,
+                    "editable": true
+                },
+                "intro_heading": {
+                    "type": "metadata_field_text",
+                    "description": "",
+                    "friendly_name": "Intro heading",
+                    "value": "Intro heading",
+                    "required": false,
+                    "editable": true
+                },
+                "intro_body": {
+                    "type": "metadata_field_wysiwyg",
+                    "description": "",
+                    "friendly_name": "Intro body",
+                    "value": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+                    "required": false,
+                    "editable": true
+                },
+                "row_num": {
+                    "type": "metadata_field_select",
+                    "description": "",
+                    "friendly_name": "Number of rows",
+                    "value": "1",
+                    "options": {
+                        "1": "One",
+                        "2": "Two",
+                        "3": "Three"
+                    },
+                    "required": false,
+                    "editable": true
+                },
+                "col_num": {
+                    "type": "metadata_field_select",
+                    "description": "",
+                    "friendly_name": "Number of columns",
+                    "value": "3",
+                    "options": {
+                        "1": "One",
+                        "2": "Two",
+                        "3": "Three"
+                    },
+                    "required": false,
+                    "editable": true
+                },
+                "col_1_width": {
+                    "type": "metadata_field_select",
+                    "description": "",
+                    "friendly_name": "Column 1 - Width Override",
+                    "value": "",
+                    "options": {
+						"": "None",
+                        "2": "One sixth",
+                        "3": "One quarter",
+                        "4": "One third",
+                        "5": "Five Twelfths",
+                        "6": "Half",
+                        "8": "Two thirds",
+                        "9": "Three quarters",
+                        "10": "Five sixths",
+                        "12": "Full"
+                    },
+                    "required": false,
+                    "editable": true
+                },
+                "col_2_width": {
+                    "type": "metadata_field_select",
+                    "description": "",
+                    "friendly_name": "Column 2 - Width Override",
+                    "value": "",
+                    "options": {
+						"": "None",
+                        "2": "One sixth",
+                        "3": "One quarter",
+                        "4": "One third",
+                        "5": "Five Twelfths",
+                        "6": "Half",
+                        "8": "Two thirds",
+                        "9": "Three quarters",
+                        "10": "Five sixths",
+                        "12": "Full"
+                    },
+                    "required": false,
+                    "editable": true
+                },
+                "col_3_width": {
+                    "type": "metadata_field_select",
+                    "description": "",
+                    "friendly_name": "Column 3 - Width Override",
+                    "value": "",
+                    "options": {
+						"": "None",
+                        "2": "One sixth",
+                        "3": "One quarter",
+                        "4": "One third",
+                        "5": "Five Twelfths",
+                        "6": "Half",
+                        "8": "Two thirds",
+                        "9": "Three quarters",
+                        "10": "Five sixths",
+                        "12": "Full"
+                    },
+                    "required": false,
+                    "editable": true
+                },
+                "col_1_1": {
+                    "type": "metadata_field_wysiwyg",
+                    "description": "",
+                    "friendly_name": "Row 1 - Column 1",
+                    "value": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+                    "required": false,
+                    "editable": true
+                },
+                "col_1_2": {
+                    "type": "metadata_field_wysiwyg",
+                    "description": "",
+                    "friendly_name": "Row 1 - Column 2",
+                    "value": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+                    "required": false,
+                    "editable": true
+                },
+                "col_1_3": {
+                    "type": "metadata_field_wysiwyg",
+                    "description": "",
+                    "friendly_name": "Row 1 - Column 3",
+                    "value": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+                    "required": false,
+                    "editable": true
+                },
+                "col_2_1": {
+                    "type": "metadata_field_wysiwyg",
+                    "description": "",
+                    "friendly_name": "Row 2 - Column 1",
+                    "value": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+                    "required": false,
+                    "editable": true
+                },
+                "col_2_2": {
+                    "type": "metadata_field_wysiwyg",
+                    "description": "",
+                    "friendly_name": "Row 2 - Column 2",
+                    "value": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+                    "required": false,
+                    "editable": true
+                },
+                "col_2_3": {
+                    "type": "metadata_field_wysiwyg",
+                    "description": "",
+                    "friendly_name": "Row 2 - Column 3",
+                    "value": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+                    "required": false,
+                    "editable": true
+                },
+                "col_3_1": {
+                    "type": "metadata_field_wysiwyg",
+                    "description": "",
+                    "friendly_name": "Row 3 - Column 1",
+                    "value": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+                    "required": false,
+                    "editable": true
+                },
+                "col_3_2": {
+                    "type": "metadata_field_wysiwyg",
+                    "description": "",
+                    "friendly_name": "Row 3 - Column 2",
+                    "value": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+                    "required": false,
+                    "editable": true
+                },
+                "col_3_3": {
+                    "type": "metadata_field_wysiwyg",
+                    "description": "",
+                    "friendly_name": "Row 3 - Column 3",
+                    "value": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+                    "required": false,
+                    "editable": true
+                },
+				"id_field": {
+					"type": "metadata_field_text",
+					"description": "",
+					"friendly_name": "Id field",
+					"value": "",
+					"required": false,
+					"editable": true
+				}
+            }
+        }
+    }
+}

package/src/components/page_alert/css/component.scss

@@ -0,0 +1,132 @@
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+// Page alerts
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+
+.qld__page-alerts {
+	@include QLD-space( padding, 1unit );
+	@include QLD-fontgrid( sm );
+	position: relative;
+	border: solid $QLD-border-width-default $QLD-color-info;
+	@include QLD-space( border-left-width, 3unit );
+	border-radius: $QLD-border-radius-xs;
+	word-wrap: break-word;
+	background-color: var(--QLD-color-light-background);
+
+	&::before{
+		content: ' ';
+		@include QLD-space( width, 1.25unit );
+		@include QLD-space( height, 1.25unit );
+		display: inline-block;
+		vertical-align: text-top;
+		mask-image: QLD-svguri($QLD-icon-info);
+		mask-repeat: no-repeat;
+		mask-position: center;
+		background-color: $QLD-color-system-white;
+		position: absolute;
+		@include QLD-space( left, -1.5unit );
+		top: 50%;
+		transform: translate(-50%, -50%);
+	}
+
+	& &--heading {
+	  	color: var(--QLD-color-light-heading);
+		@include QLD-space(margin-bottom, 1unit);
+ 
+		&.qld__display-lg {
+			@include QLD-space(margin-top, 1unit);
+		}
+	}
+
+	/**
+	* Page alert success
+	*/
+	&.qld__page-alerts--success {
+		border-color: $QLD-color-success;
+
+		&::before{
+			background-color: $QLD-color-system-darkest;
+			mask-image: QLD-svguri($QLD-icon-success);
+		}
+	}
+
+	/**
+	* Page alert warning.
+	*/
+	&.qld__page-alerts--warning {
+		border-color: $QLD-color-warning;
+
+		&::before{
+			background-color: $QLD-color-system-darkest;
+			mask-image: QLD-svguri($QLD-icon-warning);
+		}
+	}
+
+	/**
+	* Page alert error.
+	*/
+	&.qld__page-alerts--error {
+		border-color: $QLD-color-error;
+
+		&::before{
+			background-color: $QLD-color-system-white;
+			mask-image: QLD-svguri($QLD-icon-error);
+		}
+	}
+
+	// // dark and dark alt
+	.qld__body--dark &,
+	.qld__body--dark-alt &{
+		color: var(--QLD-color-light-text);
+		
+		h3{
+			color: var(--QLD-color-light-heading);
+		}
+	}
+}
+
+.qld__body #content > * + .qld__page-alerts  {
+	@include QLD-space( margin-top, 2unit );
+}
+
+
+/**
+ * Screen-reader only class for interlinking error messages and corresponding form elements.
+ */
+.qld__page-alerts__sronly {
+	@include QLD-sronly;
+}
+
+
+// Print styles
+@media print {
+	.qld__page-alerts {
+		border-color: #000 !important;
+		background-color: #fff !important;
+		border-left: 2px solid #000 !important;
+		padding-top: 3em !important;
+
+		&:after {
+			background: none !important;
+			content: 'info' !important;
+			top: 1em !important;
+			left: 0 !important;
+			font-size: 12px !important;
+			border-right: 1px solid #000 !important;
+			border-bottom: 1px solid #000 !important;
+			padding: 0.5em !important;
+			width: auto !important;
+		}
+	}
+
+	.qld__page-alerts--success:after {
+		content: 'success' !important;
+	}
+
+	.qld__page-alerts--warning:after {
+		content: 'warning' !important;
+	}
+
+	.qld__page-alerts--error:after {
+		content: 'error' !important;
+	}
+}

package/src/components/page_alert/html/component.hbs

@@ -0,0 +1,26 @@
+{{#with component.data}}
+<section class="qld__page-alerts--wrapper" id="{{#if metadata.id_field.value}}{{metadata.id_field.value}}{{else}}page-alert-{{assetid}}{{/if}}">
+    <div class="container-fluid">
+        <div class="qld__page-alerts qld__page-alerts--{{metadata.type.value}}">
+            {{!-- {{#ifCond metadata.type.value '==' 'info'}} 
+                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--md"><use href="{{@root.site.metadata.siteDefaultIcons.value}}#qld__icon__info"></use></svg>
+            {{/ifCond}}
+            {{#ifCond metadata.type.value '==' 'success'}} 
+                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--md"><use href="{{@root.site.metadata.siteDefaultIcons.value}}#qld__icon__success"></use></svg>
+            {{/ifCond}}
+            {{#ifCond metadata.type.value '==' 'warning'}} 
+                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--md"><use href="{{@root.site.metadata.siteDefaultIcons.value}}#qld__icon__warning"></use></svg>
+            {{/ifCond}}
+            {{#ifCond metadata.type.value '==' 'error'}} 
+                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--md"><use href="{{@root.site.metadata.siteDefaultIcons.value}}#qld__icon__error"></use></svg>
+            {{/ifCond}} --}}
+            {{#if metadata.heading.value}}
+                <div class="qld__page-alerts--heading qld__display-lg">{{metadata.heading.value}}</div>
+            {{/if}}
+            {{#if metadata.body.value}}
+                <div>{{{metadata.body.value}}}</div>
+            {{/if}}
+        </div>
+    </div>
+</section>
+{{/with}}

package/src/components/page_alert/js/manifest.json

@@ -0,0 +1,63 @@
+{
+	"component": {
+		"name": "Page Alert",
+		"description": "",
+		"version": "1.0",
+		"status": "Released",
+		"data": {
+			"assetid": "123",
+			"metadata": {
+				"type": {
+					"type": "metadata_field_select",
+					"description": "",
+					"friendly_name": "Type",
+					"value": "info",
+					"options": {
+						"info": "Information",
+						"success": "Success",
+						"warning": "Warning",
+						"error": "Error"
+					},
+					"required": false,
+					"editable": true
+				},
+				"heading": {
+					"type": "metadata_field_text",
+					"description": "",
+					"friendly_name": "Heading",
+					"value": "Alert heading",
+					"required": false,
+					"editable": true
+				},
+				"body": {
+					"type": "metadata_field_wysiwyg",
+					"description": "",
+					"friendly_name": "Body",
+					"value": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+					"required": false,
+					"editable": true
+				},
+				"show_if_body": {
+					"type": "metadata_field_select",
+					"description": "",
+					"friendly_name": "Show If Body",
+					"value": "false",
+					"options": {
+						"true": "Yes",
+						"false": "No"
+					},
+					"required": false,
+					"editable": true
+				},
+				"id_field": {
+					"type": "metadata_field_text",
+					"description": "",
+					"friendly_name": "Id field",
+					"value": "",
+					"required": false,
+					"editable": true
+				}
+			}
+		}
+	}
+}

package/src/components/pagination/css/component.scss

@@ -0,0 +1,196 @@
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+// Pagination
+//--------------------------------------------------------------------------
+
+.qld__search-pagination {
+    ul {
+        @include sq-list-reset;
+        display: flex;
+        flex-wrap: wrap;
+
+        li {
+            @include QLD-space(margin, .5unit .75unit .5unit 0);
+
+
+            &.ellipsis,
+            &.first,
+            &.last {
+                display: none;
+
+                @include QLD-media(md) {
+                    display: block;
+                }
+            }
+
+            &.active a{
+                background-color: var(--QLD-color-light-button);
+                border-color: var(--QLD-color-light-button);
+                color: var(--QLD-color-light-button__text);
+                font-weight: bold;
+
+
+                &:hover{
+                    background-color: var(--QLD-color-light-button__hover);
+                    border-color: var(--QLD-color-light-button__hover);
+                    @include QLD-box-shadow(1);
+                }
+
+                &:active,
+                &:focus {
+                    background-color: var(--QLD-color-light-button__hover);
+                    border-color: var(--QLD-color-light-button__hover);
+                }
+            }
+
+            &.next,
+            &.prev,
+            &.ellipsis{
+                a{
+                    border: none;
+                    @include QLD-media(lg) {
+                        width: auto;
+                    }
+                    
+                    svg{
+                        color: var(--QLD-color-light-button);
+                        width: auto;
+                    }
+                    &:hover{
+                        text-decoration: underline;
+                        svg{
+                            color: var(--QLD-color-light-alt-button);
+                        }
+                        
+                    }
+                }
+                
+                span{
+                    @include QLD-sronly();
+                    @include QLD-media(lg) {
+                        position: relative;
+                        width: auto;
+                        height: auto;
+                    }
+                }
+            }
+
+            @include QLD-media(lg) {
+                &.next span{
+                    @include QLD-space(margin-right, .5unit);
+                }
+                &.prev span{
+                    @include QLD-space(margin-left, .5unit);
+                }
+            }
+
+            &.ellipsis svg{
+                vertical-align: middle;
+            }
+        }
+
+        a {
+            @include QLD-space(height, 2unit);
+            @include QLD-space(width, 2unit);
+            align-items: center;
+            background-color: transparent;
+            border: $QLD-border-width-thin solid var(--QLD-color-light-border);
+            border-radius: $QLD-border-radius-xs;
+            color: var(--QLD-color-light-link);
+            background-color: var(--QLD-color-light-background);
+            display: inline-flex;
+            justify-content: center;
+            text-decoration: none;
+            @include QLD-space(line-height, 1.25unit);
+
+            &:hover{
+                color: var(--QLD-color-light-link);
+                border: $QLD-border-width-default solid var(--QLD-color-light-alt-button);
+                outline: none;
+            }
+
+            &:active,
+            &:focus {
+                color: var(--QLD-color-dark-link);
+                background-color: var(--QLD-color-light-alt-button);
+                border: $QLD-border-width-default solid var(--QLD-color-light-alt-button);
+            }
+
+            &[rel] {
+                color: var(--QLD-color-light-button);
+            }
+
+        }
+
+        span {
+            @include QLD-space(height, 2unit);
+            @include QLD-space(width, 2unit);
+            align-items: center;
+            color: var(--QLD-color-light-button);
+            display: inline-flex;
+            justify-content: center;
+        }
+    }
+
+    .qld__body--dark & {
+
+        li{
+            &.active a{
+                background-color: var(--QLD-color-dark-button);
+                color: var(--QLD-color-dark-button__text);
+
+                &:hover{
+                    background-color: var(--QLD-color-dark-button__hover);
+                    border-color: var(--QLD-color-dark-button__hover);
+                }
+
+                &:active,
+                &:focus {
+                    @include QLD-focus( 'dark' );
+                    color: var(--QLD-color-dark-link);
+                    background-color: var(--QLD-color-dark-button__hover);
+                    border-color: var(--QLD-color-dark-button__hover);
+                }
+            }
+
+            &.next,
+            &.prev,
+            &.ellipsis{
+                a{
+                    &:hover{
+                        color: var(--QLD-color-dark-link);
+                        border: none;
+                        svg{
+                            color: var(--QLD-color-dark-alt-button);
+                        }
+                    }
+                    svg{
+                        color: var(--QLD-color-dark-button);
+                    }
+                }
+            }
+        }
+
+        a{
+            background-color: var(--QLD-color-dark-background);
+            border-color: var(--QLD-color-dark-border);
+
+            &:hover{
+                color: var(--QLD-color-dark-link);
+                border-color: var(--QLD-color-dark-alt-button);
+                outline: none;
+            }
+
+            &:active,
+            &:focus {
+                color: var(--QLD-color-light-link);
+                background-color: var(--QLD-color-dark-alt-button);
+                border-color: var(--QLD-color-dark-alt-button);
+            }
+        }
+
+        span{
+            color: var(--QLD-color-dark-link);
+        }
+    }
+        
+}