@qhealth-design-system/core 1.0.38

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

@@ -0,0 +1,355 @@
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+// {{component_name}}
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+.qld__body .qld__code {
+    display: block;
+
+    .qld__code-copy--button {
+        @include QLD-space(padding, 0.3125unit 0.8125unit);
+        min-width: initial;
+        position: relative;
+
+        &-text {
+            @include QLD-space('margin-left', .5unit);
+            
+            @include QLD-media(sm, down) {
+                display: none;
+            }
+        }
+
+        .clean {
+            display: flex;
+
+            i {
+                @include QLD-space('font-size', 1.25unit);
+                @include QLD-space('margin', 0.125unit);
+            }
+        }
+
+        .dirty {
+            display: none;
+
+            i {
+                @include QLD-space('font-size', 1.5unit);   
+            }
+        }
+
+        &.copied {
+            background-color: var(--QLD-color-light-background__shade);
+            border-color: var(--QLD-color-light-background__shade);
+            color: var(--QLD-color-light-text);
+
+            i {
+                color: $QLD-color-success;
+            }
+
+            .clean {
+                display: none;
+            }
+
+            .dirty {
+                display: flex;
+            }
+        }
+
+        &:focus,
+        &:hover {
+            box-shadow: none;
+            text-decoration: none;
+
+            .qld__code-copy--button-text {
+                text-decoration: underline;
+            }
+
+            @include QLD-media(sm, down) {
+                .qld__code-tooltip {
+                    display: block;
+                    bottom: calc(100% + 8px);
+                }
+            }
+        }
+    }
+
+    .qld__code-header {
+        background-color: var(--QLD-color-dark-alt-background__shade);
+        border-radius: $QLD-border-radius-xs $QLD-border-radius-xs 0 0;
+        display: flex;
+        width: 100%;
+        justify-content: space-between;
+        @include QLD-space('padding', .75unit 1unit);
+        @include QLD-space('border-bottom', solid var(--QLD-color-dark-alt-border) 0.0625unit);
+
+        &-left {
+            display: flex;
+            align-items: center;
+
+            a {
+                display: inline-block;
+                border-radius: $QLD-border-radius-xs;
+                color: var(--QLD-color-dark-text);
+                @include QLD-space('margin-right', 1.25unit);
+
+                i {
+                    color: var(--QLD-color-dark-alt-button);
+                    @include QLD-space('font-size', 1.25unit);
+                    @include QLD-space('margin-right', .5unit);
+                }
+            }
+        }
+    }
+
+    .qld__code-toggle {
+        display: flex;
+        justify-content: flex-end;
+        position: relative;
+        width: 100%;
+        z-index: 1;
+
+        &.qld__body--alt {
+            background-color: var(--QLD-color-light-alt-background);
+        }
+
+        &.qld__body--dark {
+            background-color: var(--QLD-color-dark-background);
+        }
+        
+        &.qld__body--dark-alt {
+            background-color: var(--QLD-color-dark-alt-background);
+        }
+
+        &-button {
+            background-color: var(--QLD-color-dark-alt-background__shade);
+            border: 0;
+            border-radius: $QLD-border-radius-xs $QLD-border-radius-xs 0 0;
+            color: var(--QLD-color-dark-text);
+            cursor: pointer;
+            text-decoration: underline;
+            @include QLD-space('padding', .75unit 1unit);
+
+            i {
+                color: var(--QLD-color-dark-alt-button);
+                @include QLD-space('font-size', 1.25unit);
+                @include QLD-space('margin-left', .5unit);
+                transition: transform 0.25s ease-in;
+            }
+
+            &:focus,
+            &:hover {
+                text-decoration: none;
+            }
+
+            &:focus {
+                outline: 2px solid var(--QLD-color-light-focus);
+                outline-offset: 2px;
+            }
+        }
+
+        + .qld__code-header {
+            border-radius: $QLD-border-radius-xs 0 0 0;
+        }
+    }
+
+    .qld__code-preview {
+        position: relative;
+
+        &-body {
+            @include QLD-container-padding($QLD-grid-gutter-md, horizontal);
+            margin: 0;
+
+            @include QLD-media(md) {
+                @include QLD-container-padding($QLD-grid-gutter-lg, horizontal); 
+            }
+        }
+
+        &-colours {
+            align-items: center;
+            background-color: var(--QLD-color-light-background__shade);
+            border-radius: 0 $QLD-border-radius-xs 0 0;
+            color: var(--QLD-color-light-text);
+            width: 100%;
+            @include QLD-space('padding', 1.0625unit 0.875unit);
+
+            @include QLD-media(md) {
+                display: flex;
+                @include QLD-space('padding', 1.0625unit 1unit);
+            }
+
+            &-label {
+                font-weight: 700;
+                @include QLD-space('padding-right', 0.75unit);
+            }
+
+            ul {
+                display: flex;
+                flex-wrap: wrap;
+                list-style: none;
+                padding-left: 0;
+                @include QLD-space('margin-top', 0.625unit);
+
+                @include QLD-media(md) {
+                    @include QLD-space('margin-top', 0);
+                }
+
+                li {
+                    display: flex;
+                    align-items: center;
+                    @include QLD-space('margin', 0.1875unit 1unit 0.1875unit 0);
+
+                    label {
+                        color: var(--QLD-color-light-text);
+                        font-weight: 400;
+                        @include QLD-space('margin', 0);
+                        @include QLD-space('padding-left', 2.5unit);
+                    }
+                }
+            }
+        }
+
+        &-tab {
+            background-color: var(--QLD-color-dark-alt-background__shade);
+            border-radius: $QLD-border-radius-xs $QLD-border-radius-xs 0 0;
+            bottom: 100%;
+            color: var(--QLD-color-dark-text);
+            font-weight: 700;
+            display: inline-block;
+            position: absolute;
+            @include QLD-space('font-size', 0.875unit);
+            @include QLD-space('line-height', 1unit);
+            @include QLD-space('padding', 0.25unit 1unit);
+        }
+    }
+
+    // Single line type
+    &.singleline {
+        border-radius: $QLD-border-radius-xs;
+        display: flex;
+        width: 100%;
+        @include QLD-box-shadow(2);
+
+        code {
+            border-radius: $QLD-border-radius-xs 0 0 $QLD-border-radius-xs;
+            flex-grow: 1;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            @include QLD-space('padding', .625unit 1unit);
+        }
+
+        .qld__code-copy--button {
+            border-radius: 0 $QLD-border-radius-xs $QLD-border-radius-xs 0;
+        }
+    }
+
+    // Multi line type
+    &.multiline {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        @include QLD-space('max-width', 48unit);
+
+        &.with-preview {
+            background-color: var(--QLD-color-light-background);
+            border-radius: $QLD-border-radius-xs;
+            @include QLD-box-shadow(2);
+            @include QLD-space('margin-top', 1.5unit);
+        }
+
+        &:not(.with-preview) {
+            .qld__code-toggle-button,
+            .qld__code-header, code {
+                @include QLD-box-shadow(2);
+            }
+        }
+
+        code {
+            border-radius: 0 0 $QLD-border-radius-xs $QLD-border-radius-xs;
+            overflow: hidden;
+            position: relative;
+            transition: max-height 0.5s ease-in-out;
+            @include QLD-space('padding', 1.25unit 1unit);
+        }
+
+        &.show_less {
+            code {
+
+                &:before {
+                    background: linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(2, 42, 80, 0.2) 86.21%);
+                    bottom: 0;
+                    content: "";
+                    left: 0;
+                    position: absolute;
+                    width: 100%;
+                    @include QLD-space('height', 3.75unit);
+                }
+            }
+
+            .qld__code-toggle-button i {
+                transform: rotate(-180deg);
+            }
+        }
+    }
+}
+
+.qld__code--inline {
+    display: inline;
+    position: relative;
+
+    code {
+        border: 0;
+        border-radius: $QLD-border-radius-xs;
+        cursor: pointer;
+        display: inline-block;
+        text-align: left;
+        @include QLD-space('padding', .125unit .5unit);
+
+        &:focus,
+        &:hover {
+            background-color: var(--QLD-color-light-button__hover);
+
+            + .qld__code-tooltip {
+                display: block;
+            }
+        }
+
+        &:focus {
+            @include QLD-space('border', solid var(--QLD-color-light-focus) 0.125unit);
+        }
+    }
+}
+
+.qld__code-tooltip {
+    display: none;
+    background: var(--QLD-color-light-background);
+    border-radius: $QLD-border-radius-xs;
+    position: absolute;
+    bottom: calc(100% + 5px);
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 2;
+    @include QLD-space('padding', .25unit 1.5unit);
+    @include QLD-box-shadow(3);
+
+    &:before {
+        content: "";
+        width: 0;
+        height: 0;
+        border-style: solid;
+        border-width: 4px 4px 0 4px;
+        border-color: #ffffff transparent transparent transparent;
+        position: absolute;
+        bottom: -4px;
+        left: 50%;
+        transform: translateX(-50%);
+    }
+}
+
+main .qld__body #content .qld__code .qld__code-preview-body.qld__body {
+    @include QLD-space('margin', 0);
+    @include QLD-space('padding-bottom', 1.5unit);
+
+    &.qld__body--alt,
+    &.qld__body--dark,
+    &.qld__body--dark-alt {
+        @include QLD-space('padding-bottom', 1.5unit);
+    }
+}

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

@@ -0,0 +1,84 @@
+{{#with component.data.metadata}}
+    {{#if code.value}}
+        {{#ifCond code_snippet_type.value '==' 'singleline'}}
+        <div class="qld__code singleline">
+            <code class="qld__code-body">{{code.value}}</code>
+            <button class="qld__btn qld__code-copy--button" type="button">
+                <div class="clean">
+                    <i class="fa-light fa-copy"></i><span class="qld__code-copy--button-text">Copy</span>
+                </div>
+                <div class="dirty">
+                    <i class="fa-solid fa-circle-check"></i><span class="qld__code-copy--button-text">Copied</span>
+                </div>
+                <div class="qld__code-tooltip">
+                    <span class="clean">Copy</span>
+                    <span class="dirty">Copied</span>
+                </div>
+            </button>
+        </div>
+        {{/ifCond}}
+        {{#ifCond code_snippet_type.value '==' 'multiline'}}
+        <div class="qld__code multiline {{#ifCond show_more_button.value '==' 'true'}}show_less{{/ifCond}} {{#ifCond show_preview.value '==' 'true'}}with-preview{{/ifCond}}">
+            {{#ifCond show_preview.value '==' 'true'}}
+            <div class="qld__code-preview">
+                <span class="qld__code-preview-tab">Example</span>
+                <div class="qld__code-preview-colours">
+                    <span class="qld__code-preview-colours-label">Theme</span>
+                    <ul>
+                        <li>
+                            <input type="radio" name="qld__code-preview-colours-{{../component.data.assetid}}" id="qld__code-preview-colours__default-{{../component.data.assetid}}" value="" checked>
+                            <label for="qld__code-preview-colours__default-{{../component.data.assetid}}">Default</label>
+                        </li>
+                        <li>
+                            <input type="radio" name="qld__code-preview-colours-{{../component.data.assetid}}" id="qld__code-preview-colours__alt-{{../component.data.assetid}}" value="qld__body--alt">
+                            <label for="qld__code-preview-colours__alt-{{../component.data.assetid}}">Alt</label>
+                        </li>
+                        <li>
+                            <input type="radio" name="qld__code-preview-colours-{{../component.data.assetid}}" id="qld__code-preview-colours__dark-{{../component.data.assetid}}" value="qld__body--dark">
+                            <label for="qld__code-preview-colours__dark-{{../component.data.assetid}}">Dark</label>
+                        </li>
+                        <li>
+                            <input type="radio" name="qld__code-preview-colours-{{../component.data.assetid}}" id="qld__code-preview-colours__dark-alt-{{../component.data.assetid}}" value="qld__body--dark-alt">
+                            <label for="qld__code-preview-colours__dark-alt-{{../component.data.assetid}}"> Dark-alt</label>
+                        </li>
+                    </ul>
+                </div>
+                <div class="qld__code-preview-body qld__body">
+                    {{{code.value}}}
+                </div>
+            </div>
+            {{/ifCond}}
+            {{#ifCond show_more_button.value '==' 'true'}}
+            <div class="qld__code-toggle">
+                <button class="qld__code-toggle-button" type="button">Show more<i class="fa-regular fa-chevron-up"></i></button>
+            </div>
+            {{/ifCond}}
+            <div class="qld__code-header">
+                <div class="qld__code-header-left">
+                    {{#if github_link.value}}
+                        <a href="{{github_link.value}}" target="_blank"><i class="fa-regular fa-arrow-up-right-from-square"></i> Github</a>
+                    {{/if}}
+                    {{#if figma_link.value}}
+                        <a href="{{figma_link.value}}" target="_blank"><i class="fa-regular fa-arrow-up-right-from-square"></i> Figma</a>
+                    {{/if}}
+                </div>
+                <div class="qld__code-header-right">
+                    <button class="qld__btn qld__code-copy--button" type="button">
+                        <div class="clean">
+                            <i class="fa-light fa-copy"></i><span class="qld__code-copy--button-text">Copy</span>
+                        </div>
+                        <div class="dirty">
+                            <i class="fa-solid fa-circle-check"></i><span class="qld__code-copy--button-text">Copied</span>
+                        </div>
+                        <div class="qld__code-tooltip">
+                            <span class="clean">Copy</span>
+                            <span class="dirty">Copied</span>
+                        </div>
+                    </button>
+                </div>
+            </div>
+            <code class="qld__code-body">{{code.value}}</code>
+        </div>
+        {{/ifCond}}
+    {{/if}}
+{{/with}}

package/src/components/code/js/global.js

@@ -0,0 +1,160 @@
+(function () {
+    /**
+     * @module code
+     */
+    var code = {};
+
+    code.init = function() {
+        const codes = document.querySelectorAll('code')
+        const inlinecodes = document.querySelectorAll('code:not(.qld__code-body)')
+        const copyButtons = document.querySelectorAll('.qld__code-copy--button')
+        const showToggle = document.querySelectorAll('.qld__code-toggle-button')
+        const colorButtons = document.querySelectorAll('.qld__code-preview-colours input[type=radio]')
+
+        if (codes.length) {
+            codes.forEach(function(code) {
+                code.innerHTML = Prism.highlight(code.innerText, Prism.languages.html, 'html')
+            })
+        }
+
+        if (inlinecodes.length) {
+            inlinecodes.forEach(function(inlinecode){
+                const codeWrap = document.createElement("div");
+                codeWrap.classList.add('qld__code--inline');
+
+                inlinecode.replaceWith(codeWrap);
+                codeWrap.appendChild(inlinecode);
+
+                const tooltip = document.createElement("span");
+                const tooltipText = document.createTextNode("Copy");
+                tooltip.appendChild(tooltipText);
+                tooltip.classList.add('qld__code-tooltip');
+                inlinecode.after(tooltip);
+                inlinecode.setAttribute('tabindex', 0);
+
+                inlinecode.addEventListener('click', function () {
+                    copyButtonAction(this);
+                })
+
+                inlinecode.addEventListener("keypress", function(event) {
+                    if (event.key === "Enter") {
+                        event.preventDefault();
+                        copyButtonAction(this);
+                    }
+                });
+            })
+        }
+        
+        if (copyButtons.length) {
+            copyButtons.forEach(function(copyButton){
+                copyButton.addEventListener('click', function () {
+                    copyButtonAction(this);
+                })
+            })
+        }
+
+        if (showToggle.length) {
+            showToggle.forEach(function(showToggleButton){
+                const parent = showToggleButton.closest('.qld__code');
+                const target = parent.querySelector('code')
+                target.style.height = '120px'
+
+                showToggleButton.addEventListener('click', function () {
+                    if (this.innerText.indexOf('more') > -1) {
+                        this.innerHTML = 'Show less<i class="fa-regular fa-chevron-up"></i>'
+                    } else {
+                        this.innerHTML = 'Show more<i class="fa-regular fa-chevron-up"></i>'
+                    }
+
+                    QLD.animate.Toggle({
+                        element: target,
+                        property: 'height',
+                        speed: 250,
+                        closeSize: 120,
+                        prefunction: function () {
+                            parent.classList.toggle('show_less')
+                        }
+                    })
+                })
+            })
+        }
+
+        if (colorButtons.length) {
+            colorButtons.forEach(function(colorButton){
+                colorButton.addEventListener('change', function () {
+                    const body = colorButton.closest('.qld__code').querySelector('.qld__code-preview-body')
+                    body.classList.remove('qld__body--alt','qld__body--dark','qld__body--dark-alt')
+                    if (this.value){
+                        body.classList.add(this.value)
+                    }
+                    const toggle = colorButton.closest('.qld__code').querySelector('.qld__code-toggle')
+                    if (typeof(toggle)!=='undefined'){
+                        toggle.classList.remove('qld__body--alt','qld__body--dark','qld__body--dark-alt')
+                        if (this.value){
+                            toggle.classList.add(this.value)
+                        }
+                    }
+                })
+            })
+        }
+    }
+
+    function copyButtonAction(button) {
+        if (button.classList.contains('qld__code-copy--button')){
+            const parent = button.closest('.qld__code');
+            copyTextToClipboard(parent.querySelector('code').innerText)
+            button.classList.add('copied');
+
+            setTimeout(() => {
+                button.classList.remove('copied')
+            }, "1500")
+        } else {
+            copyTextToClipboard(button.innerText);
+            button.nextElementSibling.innerText = "Copied"
+            button.addEventListener('blur', function() {
+                button.nextElementSibling.innerText = "Copy"
+            });
+        }
+    }
+
+    function fallbackCopyTextToClipboard(text) {
+        const textArea = document.createElement("textarea")
+        textArea.value = text;
+        
+        // Avoid scrolling to bottom
+        textArea.style.top = "0"
+        textArea.style.left = "0"
+        textArea.style.position = "fixed"
+      
+        document.body.appendChild(textArea)
+        textArea.focus()
+        textArea.select()
+      
+        try {
+            const successful = document.execCommand('copy')
+            const msg = successful ? 'successful' : 'unsuccessful';
+            console.log('Fallback: Copying text command was ' + msg)
+        } catch (err) {
+            console.error('Fallback: Oops, unable to copy', err)
+        }
+      
+        document.body.removeChild(textArea)
+    }
+
+    function copyTextToClipboard(text) {
+        if (!navigator.clipboard) {
+            fallbackCopyTextToClipboard(text)
+            return;
+        }
+        navigator.clipboard.writeText(text).then(function() {
+            console.log('Async: Copying to clipboard was successful!')
+        }, function(err) {
+            console.error('Async: Could not copy text: ', err)
+        });
+    }
+
+    QLD.code = code;
+
+    // Init In Page Nav on document load
+    document.addEventListener('DOMContentLoaded', QLD.code.init)
+}());