qc-trousse-sdg 1.2.5-dev → 1.3.0-develop.0

package/rollup.config.js

@@ -1,9 +1,10 @@
 import svelte from 'rollup-plugin-svelte';
 import resolve from '@rollup/plugin-node-resolve';
 import css from 'rollup-plugin-css-only'
-import livereload from 'rollup-plugin-livereload';
+import sveltePreprocess from 'svelte-preprocess';
 import commonjs from '@rollup/plugin-commonjs'
-import { terser } from 'rollup-plugin-terser';
+import terser from '@rollup/plugin-terser';
+// import scss from 'rollup-plugin-sass'
 import scss from 'rollup-plugin-scss'
 import copy from 'rollup-plugin-copy'
 import replace from '@rollup/plugin-replace';
@@ -11,11 +12,17 @@ import postcss from 'postcss'
 import autoprefixer from 'autoprefixer'
 import cssReplace from 'postcss-replace'
 import pkg from './package.json';
+import fs from "fs";
 
 
 const dev_process = (process.env.npm_lifecycle_event == 'dev');
 const verbose = false;
-const path = require('path');
+const  includePaths = [
+        'src/sdg/scss',
+        'src/doc/scss'
+];
+
+// const path = require('path');
 
 function serve() {
     // Keep a reference to a spawned server process
@@ -47,6 +54,7 @@ function serve() {
 }
 
 const scssOptions = {
+    includePaths: includePaths,
     processor: css =>
         postcss([
             autoprefixer(),
@@ -55,13 +63,19 @@ const scssOptions = {
                     'pkg-version': pkg.version
                 }
             })
-        ]),
+        ])
+        .process(css, {
+            from: undefined
+        })
+        .then((result) => result.css),
     sourceMap: false,
-    includePaths: [
-        'src/sdg/scss',
-    ],
+
+    prependData: `
+        @use "qc-sdg-lib" as *;
+    `,
     outputStyle: dev_process ? 'expanded' : 'compressed',
-    watch: ['src/sdg/scss', 'src/doc/scss']
+    watch: ['src/sdg/scss', 'src/doc/scss'],
+    silenceDeprecations: ['legacy-js-api'],
 };
 
 let
@@ -74,8 +88,16 @@ let
     , svelteOptions = {
         compilerOptions: {
             // enable run-time checks
-            customElement: true
-        }
+            customElement: true,
+            cssHash: ({ hash, name, filename, css }) => {
+                // replacement of default `svelte-${hash(css)}`
+                return `qc-hash-${hash(css)}`;
+            },
+        },
+        emitCss: false,
+        preprocess: sveltePreprocess({
+            scss: scssOptions
+        })
     }
     , rollupOptions = [
         {
@@ -86,7 +108,7 @@ let
                         ? 'public/js/qc-sdg.js'
                         : 'dist/js/qc-sdg.min.js',
                 format: 'iife',
-                name: 'qcSdg'
+                name: 'qcSdg',
             },
             plugins: [
                 replace(replacements),
@@ -104,10 +126,12 @@ let
 
                 // will output compiled styles to output.css
                 scss(Object.assign({
-                    output: dev_process
-                        ? 'public/css/qc-sdg.css'
-                        : 'dist/css/qc-sdg.min.css'
-                    }
+                    output: (styles, styleNodes) => {
+                        fs.writeFileSync( dev_process
+                            ? 'public/css/qc-sdg.css'
+                            : 'dist/css/qc-sdg.min.css'
+                            , styles)
+                    }}
                     , scssOptions
                 )),
                 !dev_process && copy({
@@ -139,9 +163,12 @@ let
                 }),
                 // will output compiled styles to output.css
                 scss(Object.assign({
-                        output: dev_process
-                        ? 'public/css/qc-sdg-no-grid.css'
-                        : 'dist/css/qc-sdg-no-grid.min.css',
+                        output: (styles, styleNodes) => {
+                            fs.writeFileSync( dev_process
+                                    ? 'public/css/qc-sdg-no-grid.css'
+                                    : 'dist/css/qc-sdg-no-grid.min.css'
+                                , styles)
+                        }
                     }
                     , scssOptions
                 ))
@@ -159,9 +186,12 @@ let
                     browser: true
                 }),
                 scss(Object.assign({
-                    output: dev_process
-                        ? 'public/css/qc-sdg-design-tokens.css'
-                        : 'dist/css/qc-sdg-design-tokens.min.css',
+                        output: (styles, styleNodes) => {
+                            fs.writeFileSync( dev_process
+                                    ? 'public/css/qc-sdg-design-tokens.css'
+                                    : 'dist/css/qc-sdg-design-tokens.min.css'
+                                , styles)
+                        }
                     }
                     , scssOptions
                 )),
@@ -188,8 +218,13 @@ if (dev_process) {
             }),
             commonjs(),
             scss(
-                Object.assign(
-                    {output: 'public/css/qc-doc-sdg.css'},
+                Object.assign({
+                        output: (styles, styleNodes) => {
+                            fs.writeFileSync( dev_process
+                                    ? 'public/css/qc-doc-sdg.css'
+                                    : 'dist/css/qc-doc-sdg.min.css'
+                                , styles)
+                        }},
                     scssOptions
                 )
             ),

package/src/doc/components/Code.svelte

@@ -0,0 +1,69 @@
+<svelte:options customElement="{{
+    tag: 'qc-code'
+    , shadow: 'none'
+    , props: {
+        targetId : {attribute: 'target-id'},
+        rawCode : {attribute: 'raw-code'},
+        outerHTML: {attribute: 'outer-html', type: 'Boolean'},
+    }
+}}" />
+
+<script>
+
+  import {HighlightJS} from "highlight.js"
+  // import 'highlight.js/styles/default.css';
+  import pretty from "pretty";
+  import { onMount } from "svelte";
+  import { Utils } from "../../sdg/components/utils"
+
+  export let
+      targetId = ''
+      , rawCode = ''
+      , language = 'html'
+      , outerHTML = false
+  ;
+
+  let
+    hlCode
+    , prettyCode
+  ;
+
+  function copy() {
+      navigator.clipboard.writeText(prettyCode);
+      this.classList.add('copied')
+      setTimeout(() => {this.classList.remove('copied')}, 500)
+  }
+
+  function updateHLCode(rawCode, targetId) {
+      if (!rawCode) {
+          rawCode = document.getElementById(targetId)?.[outerHTML ? 'outerHTML' : 'innerHTML'   ]
+              ?? ''
+      }
+      rawCode
+          . replace('class="mounted"', '')
+          . replace('/qc-hash-.*/g', '')
+          . replace('/is-external=""/g', 'is-external')
+      ;
+      prettyCode = pretty(rawCode, {wrap_attributes: 'force-aligned'});
+      hlCode = HighlightJS.highlight(prettyCode, {language:language}).value;
+  }
+
+  $: updateHLCode(rawCode, targetId)
+
+</script>
+
+<pre
+    ><code class="hljs"
+        ><button class="btn btn-sm btn-primary"
+                 on:click={copy}>
+            <span class="copy">copier</span>
+            <span class="copied">copié !</span>
+        </button
+        >{@html hlCode}</code
+></pre>
+<style lang="scss">
+    pre {
+      max-inline-size: token-value(max-content-width);
+    }
+</style>
+

package/src/doc/components/Exemple.svelte

@@ -0,0 +1,71 @@
+<svelte:options customElement={{
+        tag: 'qc-doc-exemple',
+        shadow: 'none',
+        props: {
+            caption : {attribute: 'caption'},
+            codeTargetId: {attribute: 'code-target-id'},
+            hideCode: {attribute: 'hide-code', type: 'Boolean'},
+            rawCode: {attribute: 'raw-code'}
+        }
+    }} />
+    <script>
+    import Code from "./Code.svelte";
+    import {onMount} from "svelte";
+    export let
+        caption = "SVP fournir une description"
+        , codeTargetId
+        , hideCode = false
+        , rawCode
+    ;
+    let exempleCode,
+        figure,
+        rootElement,
+        exempleArea,
+        figCaption;
+    onMount(() => {
+        rootElement.parentElement.childNodes.forEach(node => {
+            if (node.nodeType == 3) {
+                return;
+            }
+            if (node != rootElement) {
+                // let detach = rootElement.removeChild(node)
+                exempleArea.appendChild(node)
+            }
+            exempleCode = rawCode
+                            ? rawCode
+                            : (codeTargetId ? document.getElementById(codeTargetId): exempleArea).innerHTML;
+        })
+    })
+
+</script>
+
+<div bind:this={rootElement}
+     class="exemple-area"
+    >
+    <figure {...$$restProps}
+            bind:this={figure}
+        >
+        <div bind:this={exempleArea}
+             class="exemple"
+            ></div>
+        <figcaption bind:this={figCaption}>
+            {@html caption}
+        </figcaption>
+    </figure>
+    {#if !hideCode}
+        <Code rawCode={exempleCode}></Code>
+    {/if}
+</div>
+<style lang="scss">
+    figure {
+      //display: block;
+      max-width: token-value(max-content-width);
+      width: 100%;
+      @include qc-shading(0);
+      margin-bottom: token-value(spacer content-block mb);
+      .exemple {
+        padding: token-value(spacer sm) token-value(spacer sm) 0 token-value(spacer sm);
+        margin-bottom: token-value(spacer sm);
+      }
+    }
+</style>

package/src/doc/components/Switch.svelte

@@ -0,0 +1,108 @@
+<svelte:options customElement="{{
+    tag: 'qc-switch',
+    shadow:'none'
+}}" />
+<script>
+    export let
+        value=false,
+        name='switch',
+        color = {
+            unchecked: 'grey-light',
+            checked: 'blue-regular',
+            slider: 'background'
+        }
+    ;
+
+</script>
+<div class="switch"
+     style="--unchecked-bg-color: var(--qc-color-{color.unchecked});
+            --checked-bg-color: var(--qc-color-{color.checked});
+            --slider-color: var(--qc-color-{color.slider});
+            "
+    >
+    <input type="checkbox"
+           role="switch"
+           {name}
+           bind:checked={value}
+           aria-checked={value}
+           {...$$restProps}
+    />
+    <span class="slider round" ></span>
+</div>
+<style lang="scss">
+
+  $switch-height: 32;
+  $switch-width: 56;
+  $switch-gap: 2;
+  $slider-height: $switch-height - 2 * $switch-gap;
+
+  /* The switch - the box around the slider */
+  .switch {
+    position: relative;
+    display: inline-block;
+    width: rem($switch-width);
+    height: rem($switch-height);
+  }
+
+  /* Hide default HTML checkbox */
+  input {
+    z-index: 10;
+    opacity: 0;
+    position: absolute;
+    cursor: pointer;
+    margin:0;
+    padding:0;
+    inset: 0;
+    height: auto;
+    width: auto;
+  }
+
+  /* The slider */
+  .slider {
+    z-index: 5;
+    //opacity: 0;
+    position: absolute;
+
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: var(--unchecked-bg-color);
+    -webkit-transition: .4s;
+    transition: .4s;
+  }
+
+  .slider::before {
+    position: absolute;
+    content: "";
+    height: rem($slider-height);
+    width: rem($slider-height);
+    left: rem($switch-gap);
+    bottom: rem($switch-gap);
+    background-color: var(--slider-color);
+    -webkit-transition: .4s;
+    transition: .4s;
+  }
+
+  input:checked + .slider {
+    background-color: var(--checked-bg-color);
+  }
+
+  input:focus + .slider {
+    box-shadow: 0 0 1px token-value(bok-shadow color);
+  }
+  $slider-translateX: translateX(rem($switch-width - $slider-height - 2 *  $switch-gap));
+  input:checked + .slider::before {
+    transform: $slider-translateX;
+  }
+
+  .slider.round, input {
+    border-radius: rem($switch-height);
+  }
+
+  .slider.round::before {
+    border-radius: 50%;
+  }
+
+
+</style>

package/src/doc/components/TopNav.svelte

@@ -0,0 +1,53 @@
+<svelte:options customElement="{{
+    tag: 'qc-doc-top-nav',
+    shadow: 'none',
+   props: {
+
+  }
+}}" />
+<script>
+    import Switch from "./Switch.svelte";
+    let value = localStorage.getItem('dark-theme') === "true";
+
+    $: document.documentElement.classList.toggle('qc-dark-theme', value)
+    $: localStorage.setItem('dark-theme', value)
+</script>
+<div role="complementary">
+    <div class="qc-container top-nav">
+        <div class="switch-control">
+            <label for="switch">Activer le thème sombre</label>
+            <Switch id="switch" bind:value />
+        </div>
+    </div>
+</div>
+<style lang="scss">
+
+  [role=complementary] {
+    position: sticky;
+    z-index: 100;
+    top: 0;
+    background-color: token-value(color blue medium);
+    color: token-value(color grey pale);
+    min-height: rem(72);
+    height: rem(72);
+  }
+  .top-nav {
+    position: absolute;
+    inset: 0;
+    display: flex;
+
+    align-items: end;
+    padding-bottom: token-value(spacer sm);
+    .switch-control {
+      margin-left: auto;
+      margin-right: 0;
+      display: flex;
+      align-items: center;
+      label:first-child {
+        margin-right: rem(16);
+      }
+    }
+  }
+
+
+</style>

package/src/doc/components/color-doc.svelte

@@ -0,0 +1,44 @@
+<svelte:options customElement="{{
+    tag: 'qc-color-doc'
+    , props: {
+        color : {attribute: 'target-id'},
+        rawCode : {attribute: 'raw-code'},
+    }
+}}" />
+<script>
+    export let
+        title,
+        token,
+        border = null
+    ;
+
+</script>
+<div class="color-details">
+    <div class="color-sample qc-bg-color-{token.split(',')[0]}"
+         class:border={border}></div>
+    <div class="color-description">
+        <strong>{title}</strong><br/>
+        <code>{token.split(',').map(part => '--qc-color-' + part.trim()).join(', ')}</code>
+    </div>
+</div>
+<style lang="scss">
+    @use "base/colors";
+    .color-details {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        > div + div {
+            margin-left: token-value(spacer,md);
+        }
+    }
+
+    .color-sample {
+        width: rem(6 * $base-spacer);
+        height: rem(6 * $base-spacer);
+        border-radius: 50%;
+        flex-shrink: 0;
+    }
+    .border {
+      border: 1px solid token-value(color grey light);
+    }
+</style>

package/src/doc/qc-doc-sdg.js

@@ -1,21 +1,32 @@
-export * from './components/code.svelte';
+export * from './components/Code.svelte';
+export * from './components/color-doc.svelte'
+export * from './components/TopNav.svelte'
+export * from './components/Switch.svelte'
+export * from './components/Exemple.svelte'
 import './scss/qc-doc-sdg.scss';
 
+if (document.getElementById("version")) {
+    document.getElementById("version").textContent = `_vSDG_`
+}
+
 // Show maskable "general alert" component
 const displayAlertLink = document.getElementById("show-qc-alert");
-const maskableAlert = document.getElementById("alert-warning");
-displayAlertLink.addEventListener(
-    'click',
-    () => {
-        maskableAlert.setAttribute('hide', 'false');
-        displayAlertLink.hidden = true;
-    }
-);
-document.addEventListener(
-    'qc.alert.hide',
-    () => displayAlertLink.hidden = false
-)
+const maskableAlert = document.getElementById("alerte-masquable");
+if (displayAlertLink) {
+    displayAlertLink.addEventListener(
+        'click',
+        () => {
+            maskableAlert.setAttribute('hide', 'false');
+            displayAlertLink.hidden = true;
+        }
+    );
+    document.addEventListener(
+        'qc.alert.hide',
+        () => displayAlertLink.hidden = false
+    )
+}
+
 
 // add version
-document.getElementById("version").textContent = `_vSDG_`
+
 

package/src/doc/scss/_tables.scss

@@ -1,5 +1,4 @@
-@use "modules/utils" as *;
-@use "modules/tokens" as *;
+@use "qc-sdg-lib" as *;
 
 table.qc-table {
   margin-bottom: 0;

package/src/doc/scss/components/_button.scss

@@ -1,7 +1,4 @@
-@use "settings/settings" as *;
-@use "functions/utils" as *;
-@use "modules/tokens" as *;
-@use "modules/utils" as *;
+@use "qc-sdg-lib" as *;
 @use "base/shadings" as *;
 
 @mixin button-border-and-padding($border-size, $padding-y, $padding-x) {
@@ -12,7 +9,7 @@
 
 .btn {
   /* si Compact font-weight: 600; */
-  @include content-font();
+  @include content-font($include-family: 1);
   display: inline-block;
   box-sizing: border-box;
   min-width: rem(112);
@@ -31,29 +28,32 @@
     @include button-border-and-padding(1px, xs, sm);
   }
 
+  @mixin state-color($color) {
+    border-color : $color;
+    background-color: $color;
+  }
+
   &.btn-primary {
 
-    color: #fff;
+    color: token-value(color background);
     border-color: token-value(color blue piv);
     background-color: token-value(color blue piv);
-    @extend .qc-shading-1;
+    @include qc-shading(1);
 
     &:hover {
-      border-color: #156bb2;
-      background-color: #156bb2;
+      @include state-color(token-value(color blue regular));
     }
 
-    &:focus {
-      border-color: token-value(color blue dark);
-      background-color: #156bb2;
+    &:focus,&:focus-visible {
+      @include state-color(token-value(color blue regular));
       box-shadow:
           0 2px 8px rgba(34, 54, 84, 0.24),
           0 0 0 2px token-value(color blue light);
+      outline: none;
     }
 
     &:active {
-      border-color: #3783c9;
-      background-color: #3783c9;
+      @include state-color(token-value(color blue regular_light));
     }
   }
 }