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

package/src/doc/scss/components/_code.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 *;
 
 qc-code {
   display: block;
@@ -60,3 +57,108 @@ pre {
     margin-top: token-value(spacer lg);
   }
 }
+
+
+pre code.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 1em
+}
+code.hljs {
+  padding: rem(4)
+}
+
+pre code.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: rem(16)
+}
+code.hljs {
+  padding: rem(4)
+}
+/* end baseline CSS */
+.hljs {
+  background: token-value(color grey pale);
+  color: token-value(color blue dark)
+}
+/* Base color: saturation 0; */
+.hljs-subst {
+  /* default */
+
+}
+/* purposely ignored */
+.hljs-formula,
+.hljs-attr,
+.hljs-property,
+.hljs-params {
+
+}
+.hljs-comment {
+  color: token-value(color grey dark)
+}
+.hljs-tag,
+.hljs-punctuation {
+  color: token-value(color blue medium)
+}
+.hljs-tag .hljs-name,
+.hljs-tag .hljs-attr {
+  color: token-value(color blue dark)
+}
+.hljs-keyword,
+.hljs-attribute,
+.hljs-selector-tag,
+.hljs-meta .hljs-keyword,
+.hljs-doctag,
+.hljs-name {
+  font-weight: bold
+}
+/* User color: hue: 0 */
+.hljs-type,
+.hljs-string,
+.hljs-number,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-quote,
+.hljs-template-tag,
+.hljs-deletion {
+  color: token-value(color red dark)
+}
+.hljs-title,
+.hljs-section {
+  color: token-value(color red dark);
+  font-weight: bold
+}
+.hljs-regexp,
+.hljs-symbol,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-link,
+.hljs-selector-attr,
+.hljs-operator,
+.hljs-selector-pseudo {
+  color: token-value(color pink regular)
+}
+/* Language color: hue: 90; */
+.hljs-literal {
+  color: token-value(color green regular)
+}
+.hljs-built_in,
+.hljs-bullet,
+.hljs-code,
+.hljs-addition {
+  color: token-value(color green dark)
+}
+/* Meta color: hue: 200 */
+.hljs-meta {
+  color: token-value(color blue medium)
+}
+.hljs-meta .hljs-string {
+  color: token-value(color blue regular)
+}
+/* Misc effects */
+.hljs-emphasis {
+  font-style: italic
+}
+.hljs-strong {
+  font-weight: bold
+}

package/src/doc/scss/jQueryUI/_jquery-ui.autocomplete.scss

@@ -0,0 +1,48 @@
+@use "qc-sdg-lib" as *;
+.ui-autocomplete {
+  max-height: calc(rem(32 * 5) + 2px) !important;
+  overflow-y: auto !important;
+  list-style-type: none !important;
+  padding-left: 0 !important;
+  margin: 0 !important;
+  border: 1px solid token-value(color grey medium);
+  background-color: token-value(color background);
+  @include qc-shading(4);
+  cursor: pointer;
+}
+
+.ui-menu-item {
+  padding: 0!important;
+  margin: 0!important;
+}
+.ui-menu-item-wrapper {
+  padding: rem(8);
+}
+.ui-state-active {
+  background-color: token-value(color blue pale);
+}
+
+.ui-autocomplete::-webkit-scrollbar {
+  width: 8px;
+  margin-left: 5px;
+}
+
+/* Track */
+.ui-autocomplete::-webkit-scrollbar-track {
+  background: token-value(color background);;
+}
+
+/* Handle */
+.ui-autocomplete::-webkit-scrollbar-thumb {
+  background: token-value(color blue piv);
+  border-radius: 15px;
+}
+
+/* Handle on hover */
+.ui-autocomplete::-webkit-scrollbar-thumb:hover {
+  background: token-value(color blue piv);
+}
+
+.ui-helper-hidden-accessible {
+  @include sr-only();
+}

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

@@ -1,33 +1,16 @@
-@use "settings/settings" as *;
-@use "functions/utils" as *;
-@use "modules/tokens" as *;
-@use "modules/utils" as *;
-@use "components/icons" as *;
+@use "qc-sdg-lib" as *;
 @use "components/code" as *;
 @use "components/button" as *;
 @use "tables";
+@use "jQueryUI/jquery-ui.autocomplete";
 
 main {
-  padding-bottom: token-value(spacer lg);
+  margin-bottom: token-value(spacer lg);
 }
 
-.color-details {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  > div + div {
-    margin-left: token-value(spacer,md);
-  }
-  & + & {
-    margin-top: token-value(spacer,md);
-  }
-}
-
-.color-sample {
-  width: rem(6 * $base-spacer);
-  height: rem(6 * $base-spacer);
-  border-radius: 50%;
-  flex-shrink: 0;
+qc-color-doc {
+  display: block;
+  margin-bottom: token-value(spacer,md);;
 }
 .title-samples {
   border: 1px solid token-value(color,grey,light);
@@ -54,6 +37,9 @@ main {
   font-family: token-value(font,family,header);
 }
 
+h1,h2,h3,h4,h5,h6 {
+  scroll-margin-top: rem(96);
+}
 
 #grid-samples {
   position: relative;
@@ -89,15 +75,20 @@ main {
   }
 }
 
-.square-box {
+#liste-elevation {
   display: flex;
-  width: rem(15 * $base-spacer);
-  height: rem(15 * $base-spacer);
-  justify-content: center;
-  align-items: center;
+  gap: token-value(grid gutter);
+  flex-wrap: wrap;
+  [class*=qc-shading-] {
+    display: flex;
+    width: rem(15 * $base-spacer);
+    height: rem(15 * $base-spacer);
+    justify-content: center;
+    align-items: center;
 
-  &.qc-shading-0 {
-    border: 1px solid token-value(color, grey, light)
+    &.qc-shading-0 {
+      border: 1px solid token-value(color, grey, light)
+    }
   }
 }
 
@@ -109,14 +100,32 @@ a {
   &.pseudo-active {
     @include active-link();
   }
-  &.visited {
-    color: token-value(color,link,visited);
+  &.pseudo-focus {
+    @include focus-link();
+  }
+  &.pseudo-visited {
+    color: token-value(color,link,visited)!important;
   }
   &.not-visited:visited:not(:hover) {
     color: token-value(color,link,text);
   }
 }
 
+span.qc-ext-link-img {
+  a.pseudo-visited  & {
+    background: token-value(color link visited)!important;
+  }
+  a.pseudo-focus  & {
+    background: token-value(color link hover)!important;
+  }
+  a.pseudo-hover  & {
+    background: token-value(color link hover)!important;
+  }
+  a.pseudo-active  & {
+    background: token-value(color link active)!important;
+  }
+}
+
 p,h1,h2,h3,h4,h5,h6 {
   hyphens: auto;
 }
@@ -125,53 +134,45 @@ table.component-attributes-description td:first-child {
   white-space: nowrap;
 }
 
-#custom-piv-search-form {
-  .input-group {
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    align-items: stretch;
-    input {
-      width: 100%;
-      padding: rem(6) rem(12) ;
-      border: 1px solid token-value(color blue dark);
-      border-right: none;
-      &:focus {
-        outline: rem(2) solid token-value(color blue light);
-        border-right: 1px solid black;
-        z-index: 1;
-      }
-      &::placeholder {
-        font-size: token-value(font size sm);
+qc-piv-footer + qc-code {
+  margin-top: 0;
+}
+
+qc-doc-exemple {
+  display: block;
+  margin-bottom: token-value(spacer xl);
+}
+
+dl {
+  margin: 0 0 token-value(spacer content-block mb);
+  dt { font-weight: token-value(font weight content medium)}
+  dd {
+    margin-left: 0;
+    margin-bottom : token-value(spacer list-item mb);
+    & + dd {
+      margin-top : calc(-1 * token-value(spacer list-item mb));
+      &:has(.pseudo-focus) {
+        margin-top : calc(-1 * token-value(spacer list-item mb) + 6px);
       }
     }
-    button {
-      display: flex;
-      justify-content: center;
-      border: 1px solid token-value(color blue dark);
-      border-left: none;
-      background-color: white;
-      width: rem(2.6 * 16);
-      &:focus{
-        outline: rem(2) solid token-value(color blue light);
-        border-left: 1px solid black;
-      }
-      .qc-search-submit {
-        min-width: rem(24);
-        height: rem(24);
-        align-self: center;
-      }
-      .sr-description {
-        position: absolute;
-        width: 1px;
-        height: 1px;
-        clip: rect(0 0 0 0);
-      }
+  }
+  &.qc-list-inline {
+    dt, dd { display: inline;}
+    dt::before {
+      display: block;
+      content: "";
+      margin-bottom: token-value(spacer list-item mb);
     }
-
   }
+
 }
-qc-piv-footer + qc-code {
-  margin-top: 0;
+
+.table-overflow {
+  width: 100%;
+  overflow-x: auto;
+}
+
+hr {
+  max-width: token-value(max-content-width);
 }
 

package/src/sdg/components/Button/IconButton.svelte

@@ -0,0 +1,29 @@
+<script>
+import Icon from "../Icon.svelte";
+
+export let
+    size = 'xl',
+    label,
+    icon,
+    iconSize,
+    iconColor
+;
+
+</script>
+
+<button on:click
+        data-button-size={size}
+        {...$$restProps}
+        class="qc-icon-button {$$restProps.class ?? ''}"
+
+    >
+    {#if icon}
+    <Icon type="{icon}"
+          size={iconSize}
+          color={iconColor}
+          aria-hidden="true"
+          label={label}
+    />
+    {/if}
+</button>
+

package/src/sdg/components/Icon.svelte

@@ -0,0 +1,39 @@
+<svelte:options customElement="{{
+    tag: 'qc-icon',
+    shadow: 'none',
+    props: {
+      type : {attribute: 'icon'},
+      label: {attribute: 'label'},
+      color: {attribute: 'color'},
+      size: {attribute: 'size'},
+      width: {attribute: 'width'},
+      height: {attribute: 'height'}
+  }
+}}" />
+<script>
+    export let
+        type,
+        label,
+        size='md',
+        color = 'text-primary',
+        width='auto',
+        height='auto'
+    ;
+    $: attributes = width === "auto"
+        ? {
+            "data-img-size":size,
+        }
+        : {}
+</script>
+<div role="img"
+     class="qc-icon"
+     aria-label={label}
+     style="--img-color:var(--qc-color-{color});
+            --img-width:{width};
+            --img-height:{height};
+        "
+     data-img-type={type}
+     {...attributes}
+     {...$$restProps}
+    >
+</div>

package/src/sdg/components/{pivHeader.svelte → PivHeader/pivHeader.svelte}

@@ -7,6 +7,7 @@
     , logoAlt : {attribute: 'logo-alt'}
     , titleUrl : {attribute: 'title-url'}
     , titleText: {attribute: 'title-text'}
+    , linksLabel: {attribute: 'links-label'}
     , altLanguageText: {attribute: 'alt-language-text'}
     , altLanguageUrl: {attribute: 'alt-language-url'}
     , joinUsText: {attribute: 'join-us-text'}
@@ -14,12 +15,8 @@
     , goToContent: {attribute: 'go-to-content'}
     , goToContentAnchor : {attribute: 'go-to-content-anchor'}
     , goToContentText: {attribute: 'go-to-content-text'}
-    , searchPlaceholder : {attribute: 'search-placeholder'}
-    , searchInputName : {attribute: 'search-input-name'}
-    , submitSearchText : {attribute: 'submit-search-text'}
     , displaySearchText : {attribute: 'display-search-text'}
     , hideSearchText : {attribute: 'hide-search-text'}
-    , searchFormAction : {attribute: 'search-form-action'}
     , enableSearch : {attribute: 'enable-search'}
     , showSearch : {attribute: 'show-search'}
   }
@@ -27,7 +24,7 @@
 
 <script>
 import { onMount } from "svelte";
-import { Utils } from "./utils"
+import { Utils } from "../utils"
 
 const
   lang = Utils.getPageLanguage()
@@ -35,15 +32,18 @@ const
 export let
     logoUrl= '/'
   , fullWidth = 'false'
-  , logoSrc = Utils.imagesRelativePath + 'quebec-logo.svg'
+  , logoSrc = Utils.imagesRelativePath + 'QUEBEC_blanc.svg'
   , logoAlt = lang === 'fr'
       ? 'Logo du gouvernement du Québec'
       : 'Logo of government of Québec'
   , titleUrl= '/'
   , titleText= ''
+  , linksLabel= lang === 'fr'
+          ? 'Navigation PIV'
+          : 'PIV navigation'
   , altLanguageText= lang === 'fr'
-                        ? 'English'
-                        : 'Français'
+                  ? 'English'
+                  : 'Français'
   , altLanguageUrl= ''
   , joinUsText= lang === 'fr'
                   ? 'Nous joindre'
@@ -54,33 +54,24 @@ export let
   , goToContentText= lang === 'fr'
       ? 'Passer au contenu'
       : 'Skip to content'
-  , searchPlaceholder =  lang === 'fr'
-      ? 'Rechercher…'
-      : 'Search…'
-  , searchInputName =  'q'
-  , submitSearchText =  lang === 'fr'
-      ? 'Rechercher'
-      : 'Search'
   , displaySearchText =  lang === 'fr'
           ? 'Cliquer pour faire une recherche'
           : 'Click to search'
   , hideSearchText =  lang === 'fr'
           ? 'Masquer la barre de recherche'
           : 'Hide search bar'
-  , searchFormAction =  '#'
   , enableSearch = 'false'
   , showSearch = 'false'
 
-export function focusOnSearchInput() {
-  if (displaySearchForm) {
-    searchInput.focus()
-  }
-}
+    export function focusOnSearchInput() {
+        if (displaySearchForm) {
+            document.querySelector('[slot="search-zone"] input')?.focus();
+        }
+    }
 
 let
     containerClass = 'qc-container'
   , displaySearchForm = false
-  , searchInput
 ;
 
 onMount(() => {
@@ -94,7 +85,10 @@ onMount(() => {
 
 </script>
 
-<div class="qc-piv-header qc-component">
+<div role="banner"
+     class="qc-piv-header qc-component"
+     style="--logo-src:url({logoSrc})"
+>
   <div class="{containerClass}">
     {#if goToContent == 'true'}
       <div class="go-to-content">
@@ -104,24 +98,30 @@ onMount(() => {
       </div>
     {/if}
     <div class="piv-top">
-      <div class="logo">
-        <a href="{logoUrl}"
-           target="_blank"
-           rel="noreferrer">
-          <img alt="{logoAlt}"
-               src="{logoSrc}">
-        </a>
-      </div>
-      {#if titleText}
-        <div class="title">
-          <a href="{titleUrl}">
-            <span>{titleText}</span>
-          </a>
+        <div class="signature-group">
+            <a href="{logoUrl}"
+               class="logo"
+               target="_blank"
+               rel="noreferrer">
+                <div role="img"
+                     aria-label="{logoAlt}"
+                ></div>
+            </a>
+
+            {#if titleText}
+                <div class="title">
+                    <a href="{titleUrl}"
+                       class="title">
+                        {titleText}
+                    </a>
+                </div>
+
+            {/if}
         </div>
-      {/if}
+
       <div class="right-section">
         {#if enableSearch == 'true'}
-          <a  class="qc-icon qc-search"
+          <a  class="qc-search"
               href="/"
               role="button"
               on:click|preventDefault = {() => displaySearchForm = !displaySearchForm}
@@ -132,48 +132,28 @@ onMount(() => {
         <div class="links">
           <slot name="links">
           {#if joinUsUrl || altLanguageUrl}
+            <nav aria-label="{linksLabel}">
               <ul>
-                {#if altLanguageUrl}
-                  <li><a href="{altLanguageUrl}">{altLanguageText}</a></li>
-                {/if}
-                {#if joinUsUrl}
-                  <li><a href="{joinUsUrl}">{joinUsText}</a></li>
-                {/if}
-              </ul>
+                  {#if altLanguageUrl}
+                    <li><a href="{altLanguageUrl}">{altLanguageText}</a></li>
+                  {/if}
+                  {#if joinUsUrl}
+                    <li><a href="{joinUsUrl}">{joinUsText}</a></li>
+                  {/if}
+                </ul>
+            </nav>
           {/if}
           </slot>
         </div>
       </div>
     </div>
     <div class="piv-bottom">
-      {#if titleText}
-        <div class="title">
-            <a href="{titleUrl}">
-              <span>{titleText}</span>
-            </a>
-        </div>
-      {/if}
       {#if displaySearchForm}
       <div class="search-zone">
-        <slot name="search-zone">
-          <form method="get"
-                action="{searchFormAction}">
-            <div class="input-group">
-              <input type="text"
-                     bind:this = {searchInput}
-                     placeholder="{searchPlaceholder}"
-                     name="{searchInputName}">
-              <button>
-                <span class="qc-icon qc-search-submit" />
-                <span class="sr-description">{submitSearchText}</span>
-              </button>
-            </div>
-          </form>
-        </slot>
+        <slot name="search-zone" />
       </div>
       {/if}
   </div>
   </div>
 </div>
-
-<link rel='stylesheet' href='{Utils.cssRelativePath}{Utils.cssFileName}'>
+<link rel='stylesheet' href='{Utils.cssPath}'>