@qhealth-design-system/core 1.0.47 → 1.0.49

package/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@qhealth-design-system/core",
-  "version": "1.0.47",
+  "version": "1.0.49",
   "lockfileVersion": 1,
   "requires": true,
   "packages": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qhealth-design-system/core",
-  "version": "1.0.47",
+  "version": "1.0.49",
   "description": "",
   "licence": "MIT",
   "main": "index.js",

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

@@ -37,7 +37,7 @@
         background-position: right 10px center;
     }
     
-    .qld__table .qld__table__cell.qld__admin_row-actions {
+    .qld__table .qld__table__cell.qld__admin_row-actions, table .qld__table__cell.qld__admin_row-actions {
         text-align: right;
         .qld__btn {
             margin: 3px 0;
@@ -79,4 +79,68 @@
         position: absolute;
         opacity: 0;
     }
+
+    .flatpickr {
+        display: flex;
+        position: relative;
+
+        .date-list {
+            position: static;
+            opacity: 1;
+            min-height: 3rem;
+            height: auto;
+            width: 9.5rem;
+
+            span {
+                display: flex;
+                align-items: center;
+                line-height: 1.5rem;
+            }
+
+            .remove-date {
+                background-color: transparent;
+                border: 0;
+                padding: 0;
+                margin-left: pxToRem(16);
+                cursor: pointer;
+
+                &:hover, &:focus {
+                    opacity: 0.5;
+                }
+                
+                svg {
+                    height: pxToRem(13);
+                    width: pxToRem(13);
+                }
+            }
+        }
+
+        &.multiple {
+            input[type=text] {
+                position: absolute;
+                opacity: 0;
+                height: 0;
+            }
+        }
+
+        .date-button {
+            background: transparent;
+            border-radius: 4px;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            padding: 0 pxToRem(12);
+            max-height: pxToRem(48);
+            margin-left: pxToRem(7);
+
+            &:hover,&:focus {
+                background: #dee0e2;
+            }
+
+            svg {
+                height: 1.125rem;
+                width: 1.125rem;
+            }
+        }
+    }
 }

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

@@ -297,6 +297,10 @@ form {
         @include QLD-space(max-width, $QLD-font-maxwidth);
         @include QLD-focus();
     }
+    ol:not(*),
+    ul:not(*){
+        @include QLD-space(max-width, $QLD-font-maxwidth);
+    }
 
     p {
         margin: 0;

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

@@ -7,7 +7,7 @@
 // - globals
 //--------------------------------------------------------------------------------------------------------------------------------------------------------------
 
-.qld__table {
+.qld__table, table {
     border-collapse: collapse;
     border-spacing: 0;
 
@@ -63,7 +63,7 @@
     }
 }
 
-.qld__table.qld__table--striped{
+.qld__table.qld__table--striped, table.qld__table--striped{
 
     .qld__table__body,
     tbody{

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

@@ -324,6 +324,8 @@
                         background-color: var(--QLD-color-light-background);
                         text-decoration: underline;
 
+                        
+
                         .qld__main-nav__sub-item-text .qld__icon{
                             @include QLD-space(margin, 0 -4px 0 1unit);
                             color: var(--QLD-color-light-alt-button__hover);
@@ -365,6 +367,10 @@
                     border-color: var(--QLD-color-light-button);
                     background-color: var(--QLD-color-light-background);
 
+                    @include QLD-media(lg) {
+                        background-color: transparent;
+                    }
+
                     .qld__main-nav__sub-item-text .qld__icon{
                         @include QLD-space(margin, 0 -4px 0 1unit);
                         color: var(--QLD-color-light-alt-button__hover);

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

@@ -3,6 +3,13 @@
 //--------------------------------------------------------------------------------------------------------------------------------------------------------------
 
 .qld__tab {
+
+    &-intro{
+        @include QLD-space(padding-bottom, 1.5unit);
+        @include QLD-media(lg) {
+            @include QLD-space(padding-bottom, 2unit);
+        }
+    }
 	
     &s {
         display: flex;
@@ -396,7 +403,7 @@
     }
 }
 
-* + .qld__tab-container {
+*:not(.row) + .qld__tab-container {
     margin-top: 32px;
 }
 

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

@@ -2,6 +2,53 @@
 {{#with component.data}}
 <section class="qld__body{{#if metadata.theme.value}} qld__body--{{metadata.theme.value}}{{/if}}{{#ifCond metadata.display.value '==' 'full'}} qld__body--full-width tab-section{{/ifCond}}" id="{{#if metadata.id_field.value}}{{metadata.id_field.value}}{{else}}tag-{{assetid}}{{/if}}">
     <div class="container-fluid">
+
+        {{#if metadata.intro_heading.value}}
+        <div class="row">
+
+            <div class="qld__tab-intro col-xs-12 {{metadata.intro_width.value}}">
+                
+                {{#ifCond metadata.intro_heading_level.value '==' 'h5'}}
+                    <h5>{{metadata.intro_heading.value}}</h5>
+                {{else ifCond metadata.intro_heading_level.value '==' 'h4'}}
+                    <h4>{{metadata.intro_heading.value}}</h4>
+                {{else ifCond metadata.intro_heading_level.value '==' 'h3'}}
+                    <h3>{{metadata.intro_heading.value}}</h3>
+                {{else}}
+                    <h2>{{metadata.intro_heading.value}}</h2>
+                {{/ifCond}}
+
+                {{#if metadata.intro_body.value}}
+                {{{metadata.intro_body.value}}}
+                {{/if}}
+
+            </div>
+        </div>
+        {{else}}
+            {{#if metadata.intro_body.value}}
+            <div class="row">
+
+                <div class="qld__tab-intro col-xs-12 {{metadata.intro_width.value}}">
+                    
+                    {{#if metadata.intro_heading.value}}
+                        {{#ifCond metadata.intro_heading_level.value '==' 'h5'}}
+                            <h5>{{metadata.intro_heading.value}}</h5>
+                        {{else ifCond metadata.intro_heading_level.value '==' 'h4'}}
+                            <h4>{{metadata.intro_heading.value}}</h4>
+                        {{else ifCond metadata.intro_heading_level.value '==' 'h3'}}
+                            <h3>{{metadata.intro_heading.value}}</h3>
+                        {{else}}
+                            <h2>{{metadata.intro_heading.value}}</h2>
+                        {{/ifCond}}
+                    {{/if}}
+
+                    {{{metadata.intro_body.value}}}
+
+                </div>
+            </div>
+            {{/if}}
+        {{/if}}
+        
         <div class="qld__tab-container{{#if metadata.theme.value}} qld__tab-container--{{metadata.theme.value}}{{/if}} qld__tab-container__fixed" id="tab-{{assetid}}">
             <button class="qld__tab-nav__item-scroll tab-overflow-nav-button-left" aria-hidden="true" aria-label="Scroll tab buttons left" tabindex="-1"><i class="fa-solid fa-chevron-left"></i></button>
             <button class="qld__tab-nav__item-scroll tab-overflow-nav-button-right" aria-hidden="true" aria-label="Scroll tab buttons right" tabindex="-1"><i class="fa-solid fa-chevron-right"></i></button>

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

@@ -33,6 +33,46 @@
 					"required": false,
 					"editable": true
 				},
+				"intro_width": {
+					"type": "metadata_field_select",
+					"description": "",
+					"friendly_name": "Intro width",
+					"value": "col-md-6",
+					"options": {
+						"col-md-6": "Half width",
+						"col-md-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_heading_level": {
+                    "type": "metadata_field_select",
+                    "description": "",
+                    "friendly_name": "Intro heading level",
+                    "value": "h2",
+                    "options": {
+                        "h2": "h2",
+                        "h3": "h3",
+                        "h4": "h4",
+                        "h5": "h5"
+                    }
+                },
+				"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
+				},
 				"type": {
 					"type": "metadata_field_select",
 					"description": "",

package/src/styles/imports/Untitled-1.html

@@ -0,0 +1,39 @@
+<table style="width: 100%">
+    <tbody class="qld__table__body">
+        <tr class="qld__table__row">
+            <td class="qld__table__cell"><p>Time</p></td>
+            <td class="qld__table__cell"><p>Fee</p></td>
+            <td class="qld__table__cell"><p>Concession</p></td>
+        </tr>
+        <tr class="qld__table__row">
+            <td class="qld__table__cell"><p>Less than 20 minutes</p></td>
+            <td class="qld__table__cell"><p>Free</p></td>
+            <td class="qld__table__cell"><p>Free</p></td>
+        </tr>
+        <tr class="qld__table__row">
+            <td class="qld__table__cell"><p>20 mins to 1 hour</p></td>
+            <td class="qld__table__cell"><p>$2.00</p></td>
+            <td class="qld__table__cell"><p>$2.00</p></td>
+        </tr>
+        <tr class="qld__table__row">
+            <td class="qld__table__cell"><p>1 to 3 hours</p></td>
+            <td class="qld__table__cell"><p>$4.00</p></td>
+            <td class="qld__table__cell"><p>$2.00</p></td>
+        </tr>
+        <tr class="qld__table__row">
+            <td class="qld__table__cell"><p>3 to 4 hours</p></td>
+            <td class="qld__table__cell"><p>$6.00</p></td>
+            <td class="qld__table__cell"><p>$3.00</p></td>
+        </tr>
+        <tr class="qld__table__row">
+            <td class="qld__table__cell"><p>4 to 6 hours</p></td>
+            <td class="qld__table__cell"><p>$8.00</p></td>
+            <td class="qld__table__cell"><p>$4.00</p></td>
+        </tr>
+        <tr class="qld__table__row">
+            <td class="qld__table__cell"><p>6 to 24 hours</p></td>
+            <td class="qld__table__cell"><p>$10.00</p></td>
+            <td class="qld__table__cell"><p>$5.00</p></td>
+        </tr>
+    </tbody>
+</table>