@qhealth-design-system/core 1.0.38

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

@@ -0,0 +1,29 @@
+{
+	"component": {
+		"name": "Abstract",
+		"description": "",
+		"version": "1.0",
+		"status": "Released",
+		"data": {
+			"assetid": "123",
+			"metadata": {
+				"content": {
+					"type": "metadata_field_wysiwyg",
+					"description": "Content to display",
+					"friendly_name": "Content",
+					"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": "abstract-000",
+					"required": false,
+					"editable": true
+				}
+			}
+		}
+	}
+}

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

@@ -0,0 +1,329 @@
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+// Accordion
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+
+.qld__accordion {
+	border: $QLD-border-width-thin solid var(--QLD-color-light-border);
+	display: block;
+	padding: 0;
+
+	&__title{
+		background-color: var(--QLD-color-light-background__shade);
+		@include QLD-fontgrid( md, heading );
+		@include QLD-space( padding, 1unit 3unit 1unit 1unit );
+		width: 100%;
+		display: block;
+		color: var(--QLD-color-light-link);
+		text-decoration: underline;
+		text-decoration-skip-ink: auto;
+		font-weight: normal;
+		position: relative;
+		border: none;
+
+		// button resets
+		box-sizing: border-box;
+		margin: 0;
+		cursor: pointer;
+		text-align: left;
+		font-family: inherit;
+		@include QLD-focus();
+
+		&:focus {
+			z-index: 100;
+		}
+
+		// remove the default details arrow icon
+		&::-webkit-details-marker {
+			display: none;
+		}
+
+		&:hover {
+			text-decoration: none;
+			color: var(--QLD-color-light-heading);
+		}
+
+		.qld__icon{
+			color: var(--QLD-color-light-alt-button);
+			position: absolute;
+			@include QLD-space( right, 1unit );
+			z-index: 1;
+			transition: transform 0.25s ease-in;
+		}
+
+		&:after {
+			content: ' ';
+			position: absolute;
+			top: 50%;
+			@include QLD-space( margin-top, -0.5unit ); // Pull it up half of it's height
+			@include QLD-space( right, 1unit );
+			@include QLD-space( width, 1.5unit );
+			@include QLD-space( height, 1.5unit );
+			// background-image: QLD-svg-with-fill($QLD-icon-chevron-up, var(--QLD-color-light-alt-button));
+			// background-repeat: no-repeat;
+			// background-position: center;
+			z-index: 1;
+			transition: transform 0.25s ease-in;
+			mask-image: QLD-svguri($QLD-icon-chevron-up);
+			mask-repeat: no-repeat;
+			mask-position: center;
+			background-color: var(--QLD-color-light-alt-button);
+		}
+
+		&.qld__accordion--closed::after {
+			transform: rotate(-180deg);
+		}
+	}
+
+	&__body{
+		overflow: hidden;
+
+		// only listen to the state classes if js is enabled
+		.js & {
+			&.qld__accordion--open {
+				display: block;
+				height: auto;
+			}
+
+			&.qld__accordion--closed {
+				display: none;
+				height: 0;
+			}
+		}
+		& &-wrapper{
+			border-top: $QLD-border-width-thin solid var(--QLD-color-light-border);
+			color: var(--QLD-color-light-text);
+			background-color: var(--QLD-color-light-background);
+			@include QLD-space( padding, 1unit);
+
+			ul{
+				list-style: disc;
+				@include QLD-space(margin-left, 1.25unit);
+			}			
+		}
+	}
+
+	&__toggle{
+		font-weight: bold;
+		text-decoration: none;
+		display: flex;
+		flex-direction: row;
+		justify-content: end;
+		@include QLD-space(padding, .5unit 0);
+		@include QLD-space(font-size, 0.75unit);
+
+		&-btn{
+			background-color: transparent;
+			color: var(--QLD-color-light-link);
+			border: none;
+			text-decoration: underline;
+			cursor: pointer;
+			position: relative;
+			@include QLD-space( margin-right, 0.5unit );
+			&:hover{
+					text-decoration: none;
+			}
+			&::after{
+				content: ' ';
+				position: absolute;
+				top: 50%;
+				@include QLD-space( margin-top, -0.5unit ); // Pull it up half of it's height
+				@include QLD-space( right, -.5unit );
+				@include QLD-space( width, .5unit );
+				@include QLD-space( height, 1unit );
+				// background-image: QLD-svg-with-fill($QLD-icon-chevron-up, var(--QLD-color-light-alt-button));
+				// background-repeat: no-repeat;
+				// background-position: center;
+				z-index: 101;
+				transition: transform 0.25s ease-in;
+				mask-image: QLD-svguri($QLD-icon-chevron-up);
+				mask-repeat: no-repeat;
+				mask-position: center;
+				background-color: var(--QLD-color-light-alt-button);
+			}
+			// .qld__icon{
+			// 	color: var(--QLD-color-light-alt-button);
+			// 	vertical-align: middle;
+			// 	transition: transform 0.25s ease-in;
+			// 	@include QLD-space( margin-left, 0.5unit );
+			// }
+			
+			&--closed {
+				&::after{
+					transform: rotate(-180deg);
+				}
+				
+			}
+		}
+	}
+
+	// Add spacing if there is an element before it
+	* + & {
+		@include QLD-space( margin-top, 1unit );
+	}
+
+	+ .qld__accordion {
+		@include QLD-space(
+			border-top,
+			solid var(--QLD-color-light-border) 0.0625unit
+		);
+	}
+}
+
+
+.qld__accordion-group {
+	list-style: none;
+	padding: 0;
+	@include QLD-space(max-width, 47unit);
+
+	&:last-child{
+		@include QLD-space(margin-bottom, 0unit);
+	}
+	
+	ul {
+		list-style: none;
+		padding: 0;
+		margin: 0;
+	}
+	
+	.qld__accordion__toggle-btn{
+
+		.qld__body--dark &,
+		.qld__body--dark-alt &{
+			color: var(--QLD-color-dark-link);
+
+			// &::after{
+			// 	background-image: QLD-svg-with-fill($QLD-icon-chevron-up, var(--QLD-color-dark-alt-button));
+			// }
+			&::after{
+				background-color: var(--QLD-color-dark-alt-button);
+			}
+			
+		}
+	}
+
+	&--alt{
+		.qld__accordion{
+			border-color: var(--QLD-color-light-alt-border);
+		}
+
+		.qld__accordion__title{
+			background-color: var(--QLD-color-light-alt-background__shade);
+		}
+
+		.qld__accordion__body-wrapper{
+			background-color: var(--QLD-color-light-alt-background);
+			border-color: var(--QLD-color-light-alt-border);
+		}
+	}
+
+	&--dark{
+		.qld__accordion{
+			border-color: var(--QLD-color-dark-border);
+		}
+
+		.qld__accordion__title{
+			background-color: var(--QLD-color-dark-background__shade);
+			color: var(--QLD-color-dark-link);
+
+			// &::after{
+			// 	background-image: QLD-svg-with-fill($QLD-icon-chevron-up, var(--QLD-color-dark-alt-button));
+			// }
+			&::after{
+				background-color: var(--QLD-color-dark-alt-button);
+			}
+
+			&:hover{
+				color: var(--QLD-color-dark-heading);
+			}
+		}
+
+		.qld__accordion__body-wrapper{
+			background-color: var(--QLD-color-dark-background);
+			border-color: var(--QLD-color-dark-border);
+			color: var(--QLD-color-dark-text);
+		}
+	}
+
+	&--dark-alt{
+		.qld__accordion{
+			border-color: var(--QLD-color-dark-alt-border);
+		}
+
+		.qld__accordion__title{
+			background-color: var(--QLD-color-dark-alt-background__shade);
+			color: var(--QLD-color-dark-link);
+
+			// &::after{
+			// 	background-image: QLD-svg-with-fill($QLD-icon-chevron-up, var(--QLD-color-dark-alt-button));
+			// }
+			&::after{
+				background-color: var(--QLD-color-dark-alt-button);
+			}
+
+			&:hover{
+				color: var(--QLD-color-dark-heading);
+			}
+		}
+
+		.qld__accordion__body-wrapper{
+			background-color: var(--QLD-color-dark-alt-background);
+			border-color: var(--QLD-color-dark-alt-border);
+			color: var(--QLD-color-dark-text);
+		}
+	}
+}
+
+.qld__accordion + .qld__accordion {
+	margin-top: 0;
+	border-top: 0;
+}
+
+
+li + li .qld__accordion {
+	border-top: none;
+}
+
+.main {
+    * {
+        + .qld__accordion,
+        + .qld__accordion-group {
+            @include QLD-space(margin-top, 1.5unit);
+			@include QLD-space(margin-bottom, 1.5unit);
+
+			@include QLD-media(lg) {
+				@include QLD-space(margin-top, 2unit);
+			}
+			
+			&:last-child{
+				@include QLD-space(margin-bottom, 0unit);
+			}
+        }
+    }
+}
+
+
+@media print {
+	.qld__accordion {
+		border-color: #000 !important;
+		color: #000 !important;
+	}
+
+	.qld__accordion__title {
+		background: #fff !important;
+		color: #000 !important;
+		border: 1px !important;
+
+		&:after {
+			display: none;
+		}
+	}
+
+	.qld__accordion__body-wrapper {
+		border-color: #000 !important;
+	}
+
+	.qld__accordion__body {
+		height: auto !important;
+		display: block !important;
+	}
+}

package/src/components/accordion/html/accordion-group.html

@@ -0,0 +1,157 @@
+<div id="accordion--group1" class="component" data-component-id="accordion" data-asset-id="123"></div>
+<div id="accordion--group2" class="component" data-component-id="accordion" data-asset-id="123"></div>
+
+<script>
+    document.addEventListener('DOMContentLoaded', function (e) {
+
+        var accordion1 = document.getElementById('accordion--group1');
+        var accordion2 = document.getElementById('accordion--group2');
+
+        if (accordion1) {
+            accordion1.outerHTML = accordionTemplate({
+                "containerId": "3",
+                "data": {
+                    "heading": {
+                        "value": "Group of 3",
+                        "fieldid": "450",
+                        "type": "metadata_field_text",
+                        "is_contextable": true,
+                        "default_value": true,
+                        "use_default": true
+                    },
+                    "intro": {
+                        "value": "",
+                        "fieldid": "451",
+                        "type": "metadata_field_wysiwyg",
+                        "is_contextable": true,
+                        "default_value": false,
+                        "use_default": true
+                    },
+                    "title_1": {
+                        "value": "Accordion title",
+                        "fieldid": "452",
+                        "type": "metadata_field_text",
+                        "is_contextable": true,
+                        "default_value": false,
+                        "use_default": true
+                    },
+                    "content_1": {
+                        "value": "<p>Type something<\/p>",
+                        "fieldid": "453",
+                        "type": "metadata_field_wysiwyg",
+                        "is_contextable": true,
+                        "default_value": false,
+                        "use_default": true
+                    },
+                    "title_2": {
+                        "value": "Accordion title",
+                        "fieldid": "454",
+                        "type": "metadata_field_text",
+                        "is_contextable": true,
+                        "default_value": false,
+                        "use_default": true
+                    },
+                    "content_2": {
+                        "value": "<p>Type something<\/p>",
+                        "fieldid": "455",
+                        "type": "metadata_field_wysiwyg",
+                        "is_contextable": true,
+                        "default_value": false,
+                        "use_default": true
+                    },
+                    "title_3": {
+                        "value": "Accordion title",
+                        "fieldid": "456",
+                        "type": "metadata_field_text",
+                        "is_contextable": true,
+                        "default_value": false,
+                        "use_default": true
+                    },
+                    "content_3": {
+                        "value": "<p>Type something<\/p>",
+                        "fieldid": "457",
+                        "type": "metadata_field_wysiwyg",
+                        "is_contextable": true,
+                        "default_value": false,
+                        "use_default": true
+                    }
+                }
+                
+            });
+        }
+
+        if (accordion2) {
+            accordion2.outerHTML = accordionTemplate({
+                "containerId": "4",
+                "data": {
+                    "heading": {
+                        "value": "Group of 2",
+                        "fieldid": "450",
+                        "type": "metadata_field_text",
+                        "is_contextable": true,
+                        "default_value": true,
+                        "use_default": true
+                    },
+                    "intro": {
+                        "value": "",
+                        "fieldid": "451",
+                        "type": "metadata_field_wysiwyg",
+                        "is_contextable": true,
+                        "default_value": false,
+                        "use_default": true
+                    },
+                    "title_1": {
+                        "value": "Accordion title",
+                        "fieldid": "452",
+                        "type": "metadata_field_text",
+                        "is_contextable": true,
+                        "default_value": false,
+                        "use_default": true
+                    },
+                    "content_1": {
+                        "value": "<p>Type something<\/p>",
+                        "fieldid": "453",
+                        "type": "metadata_field_wysiwyg",
+                        "is_contextable": true,
+                        "default_value": false,
+                        "use_default": true
+                    },
+                    "title_2": {
+                        "value": "Accordion title",
+                        "fieldid": "454",
+                        "type": "metadata_field_text",
+                        "is_contextable": true,
+                        "default_value": false,
+                        "use_default": true
+                    },
+                    "content_2": {
+                        "value": "<p>Type something<\/p>",
+                        "fieldid": "455",
+                        "type": "metadata_field_wysiwyg",
+                        "is_contextable": true,
+                        "default_value": false,
+                        "use_default": true
+                    },
+                    "title_3": {
+                        "value": "",
+                        "fieldid": "456",
+                        "type": "metadata_field_text",
+                        "is_contextable": true,
+                        "default_value": false,
+                        "use_default": true
+                    },
+                    "content_3": {
+                        "value": "",
+                        "fieldid": "457",
+                        "type": "metadata_field_wysiwyg",
+                        "is_contextable": true,
+                        "default_value": false,
+                        "use_default": true
+                    }
+                }
+            });
+        }
+
+    });
+
+</script>

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

@@ -0,0 +1,46 @@
+{{#ifCond current.data.metadata.pageType.value '==' 'landing'}}
+<section class="qld__body">
+    <div class="container-fluid">
+{{/ifCond}}    
+
+{{#with component.data}}
+    {{#if metadata.heading.value}}
+    <h2>{{metadata.heading.value}}</h2>
+    {{/if}}
+
+    {{#if metadata.intro.value}}
+    {{{metadata.intro.value}}}
+    {{/if}}
+    <div class="qld__accordion-group {{metadata.theme.value}}" id="{{#if metadata.id_field.value}}{{{metadata.id_field.value}}}{{else}}accordion-{{assetid}}{{/if}}">
+        {{#ifCond metadata.toggle_all.value '==' 'yes'}}
+        <div class="qld__accordion__toggle">
+            <button class="qld__accordion__toggle-btn qld__accordion__toggle-btn--closed">Open all</button>
+        </div>
+        {{/ifCond}}
+        <ul class="qld__accordion-list">
+            {{#printAccordion metadata}}
+                {{#ifCond this.content '!=' ''}}
+                <li>
+                    <section class="qld__accordion">
+                        <button class="qld__accordion__title js-qld__accordion qld__accordion--closed" aria-controls="accordion-group-{{../assetid}}-{{this.fieldid}}" aria-expanded="false" >
+                            {{this.title}}
+                        </button>
+            
+                        <div class="qld__accordion__body qld__accordion--closed" id="accordion-group-{{../assetid}}-{{this.fieldid}}">
+                            <div class="qld__accordion__body-wrapper">
+                                {{{this.content}}}
+                            </div>
+                        </div>
+                    </section>
+                </li>
+                {{/ifCond}}
+            {{/printAccordion}}
+        </ul>
+    </div>
+{{/with}}
+
+{{#ifCond current.data.metadata.pageType.value '==' 'landing'}}
+</div>
+</section>
+{{/ifCond}}
+

package/src/components/accordion/html/default.html

@@ -0,0 +1,92 @@
+<div id="accordion--single1" class="component" data-component-id="accordion" data-asset-id="123"></div>
+<div id="accordion--single2" class="component" data-component-id="accordion" data-asset-id="123"></div>
+
+<script>
+    document.addEventListener('DOMContentLoaded', function (e) {
+
+        var accordion1 = document.getElementById('accordion--single1');
+        var accordion2 = document.getElementById('accordion--single2');
+
+        if (accordion1) {
+            accordion1.outerHTML = accordionTemplate({
+                "containerId": "1",
+                "data": {
+                    "heading": {
+                        "value": "Single accordion",
+                        "fieldid": "450",
+                        "type": "metadata_field_text",
+                        "is_contextable": true,
+                        "default_value": true,
+                        "use_default": true
+                    },
+                    "intro": {
+                        "value": "<p>Some intro text<\/p>",
+                        "fieldid": "451",
+                        "type": "metadata_field_wysiwyg",
+                        "is_contextable": true,
+                        "default_value": false,
+                        "use_default": true
+                    },
+                    "title_1": {
+                        "value": "Accordion title",
+                        "fieldid": "452",
+                        "type": "metadata_field_text",
+                        "is_contextable": true,
+                        "default_value": false,
+                        "use_default": true
+                    },
+                    "content_1": {
+                        "value": "<p>Type something<\/p>",
+                        "fieldid": "453",
+                        "type": "metadata_field_wysiwyg",
+                        "is_contextable": true,
+                        "default_value": false,
+                        "use_default": true
+                    }
+                }
+            });
+        }
+
+        if (accordion2) {
+            accordion2.outerHTML = accordionTemplate({
+                "containerId": "2",
+                "data": {
+                    "heading": {
+                        "value": "Another single accordion",
+                        "fieldid": "450",
+                        "type": "metadata_field_text",
+                        "is_contextable": true,
+                        "default_value": true,
+                        "use_default": true
+                    },
+                    "intro": {
+                        "value": "",
+                        "fieldid": "451",
+                        "type": "metadata_field_wysiwyg",
+                        "is_contextable": true,
+                        "default_value": false,
+                        "use_default": true
+                    },
+                    "title_1": {
+                        "value": "Accordion title",
+                        "fieldid": "452",
+                        "type": "metadata_field_text",
+                        "is_contextable": true,
+                        "default_value": false,
+                        "use_default": true
+                    },
+                    "content_1": {
+                        "value": "<p>Type something<\/p>",
+                        "fieldid": "453",
+                        "type": "metadata_field_wysiwyg",
+                        "is_contextable": true,
+                        "default_value": false,
+                        "use_default": true
+                    }
+                }
+            });
+        }
+
+    });
+
+</script>