testio-tailwind 3.7.0 → 3.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "testio-tailwind",
-	"version": "3.7.0",
+	"version": "3.9.0",
 	"description": "Tailwind based design system for Test IO",
 	"scripts": {
 		"clean": "del dist --force",

package/src/_includes/page-with-sidebar-dark.njk

@@ -0,0 +1,48 @@
+
+<nav class="sidebar manager">
+  <div class="navlinks">
+    {% set sortedSections = collection | sort(attribute='data.title') %}
+    {% for section in sortedSections %}
+      <a class="navlink" href="#{{ section.data.title }}">{{ section.data.title }}</a>
+    {% endfor %}
+  </div>
+</nav>
+
+<main tabindex="-1" id="main-content" class="main-content main-content-padding">
+  <article class="">
+
+    {% for item in navigation.items %}
+      {% if page.url == item.url %}
+        <h1 class="mb-heading">{{ item.text }}</h1>
+      {% endif %}
+    {% endfor %}
+
+    {% set sortedSections = collection | sort(attribute='data.title') %}
+    {% for section in sortedSections %}
+      <section class="section" id="{{ section.data.title }}">
+        <div class="section-header">
+          <h4 class="section-title">{{ section.data.title }}</h2>
+        </div>
+
+        {% if section.data.type == 'block' %}
+          {% set direction = 'y' %}
+        {% else %}
+          {% set direction = 'x' %}
+        {% endif %}
+        {{ section.templateContent | safe }}
+
+        <details class="mt-3">
+          <summary class="btn btn-sm btn-secondary inline-block cursor-pointer mb-2">
+            Show source
+          </summary>
+          <div class="prose max-w-none bg-gray-light p-2 rounded mb-1">
+            <pre><code class="html-preview">{{ section.templateContent | trim }}</code></pre>
+          </div>
+        </details>
+      </section>
+    {%- endfor -%}
+  </article>
+</main>
+
+
+

package/src/_layouts/page-example-agenticqa.njk

@@ -7,7 +7,7 @@
 
     {% block content %}
       <main class="page-example-container">
-        <div class="app-body">
+        <div class="app-body dark">
           {% include "example-header-agenticqa.njk" %}
           {{ content | safe }}
         </div>

package/src/assets/stylesheets/app.css

@@ -30,6 +30,7 @@
 @import './components/chat.css' layer(components);
 @import './components/checkboxes_radiobuttons.css' layer(components);
 @import './components/devices.css' layer(components);
+@import './components/divider.css' layer(components);
 @import './components/drawer.css' layer(components);
 @import './components/dropdown.css' layer(components);
 @import './components/emptystate_message.css' layer(components);
@@ -91,4 +92,5 @@
 
 /*//// Agentic QA components ////*/
 @import './components/agenticqa/agenticqa_header.css' layer(components);
-@import './components/agenticqa/agenticqa_sidebar.css' layer(components);
+@import './components/agenticqa/agenticqa_sidebar.css' layer(components);
+@import './components/agenticqa/agenticqa_pageheader.css' layer(components);

package/src/assets/stylesheets/components/agenticqa/agenticqa_pageheader.css

@@ -0,0 +1,48 @@
+
+.page-header {
+  @apply grid lg:grid-cols-5 gap-xs lg:gap-grid-gutter mb-grid-gutter;
+}
+
+.page-header .page-maincard {
+  @apply lg:col-span-4;
+}
+
+.page-session-title {
+  @apply mb-sm;
+}
+
+.page-meta-info {
+  @apply grid grid-cols-2 xl:grid-cols-6 gap-xs place-content-start mb-xs;
+  grid-template-columns: auto auto;
+  @media (width >= theme(--breakpoint-xl)) {
+    grid-template-columns: auto auto auto auto auto auto;
+  }
+}
+
+.page-meta-info dt {
+  @apply pr-xs;
+}
+
+.page-meta-info dd {
+  @apply mb-0 pr-lg text-label-color;
+}
+
+.page-meta-info .row-testsuite {
+  @apply xl:col-span-5;
+}
+
+.page-actions {
+  @apply flex flex-row lg:flex-col h-full;
+}
+
+.page-actions .btn {
+  @apply justify-center text-center ml-xxs first:ml-0 mr-xxs last:mr-0 lg:mx-0 lg:mb-xs lg:last:mb-0 w-full border-bordercolor;
+}
+
+.page-actions .btn-main {
+  @apply flex-grow lg:flex-col;
+}
+
+.page-actions .btn-main .icon {
+  @apply hidden lg:block lg:mb-sm lg:h-icon-xl lg:text-icon-xl;
+}

package/src/assets/stylesheets/components/buttons.css

@@ -1,7 +1,8 @@
 .btn,
 input.btn,
 input[type="submit"].btn {
-  @apply inline-flex justify-start items-center h-btn px-md font-body font-semibold text-buttons whitespace-nowrap text-primary border-0 rounded cursor-pointer select-none;
+  @apply inline-flex justify-start items-center h-btn px-md font-body font-semibold text-buttons whitespace-nowrap text-primary border-0 rounded cursor-pointer select-none
+  dark:uppercase;
 
   &:hover,
   &:focus,

package/src/assets/stylesheets/components/chat.css

@@ -1,5 +1,9 @@
 .list-chat-messages {
-  @apply grid gap-md;
+  @apply grid grid-cols-1 gap-md;
+}
+
+.list-chat-messages.full-width .chat-message-item {
+  @apply max-w-full;
 }
 
 .chat-message-item {
@@ -11,16 +15,23 @@
   grid-template-columns: auto auto 1fr;
 }
 
+.dark .chat-message-item {
+  grid-template-areas:  "chat-avatar chat-header"
+                        "chat-avatar chat-message";
+  grid-template-columns: auto auto 1fr;
+}
+
+
 .chat-avatar {
   grid-area: chat-avatar;
 }
 
 img.chat-avatar {
-  @apply w-spacing h-spacing mr-xs rounded-full;
+  @apply w-spacing h-spacing mr-xs rounded-full dark:mr-md;
 }
 
 .chat-header {
-  @apply flex text-label py-xxs text-label-color;
+  @apply relative flex text-label py-xxs text-label-color dark:justify-between dark:px-sm dark:py-xs dark:bg-listitem dark:rounded-t;
   grid-area: chat-header;
   line-height: 1.3;
 }
@@ -30,11 +41,15 @@ img.chat-avatar {
 }
 
 .chat-message {
-  @apply p-xs rounded bg-card dark:bg-gray-800;
+  @apply p-xs rounded bg-card dark:w-full dark:px-sm dark:pt-0 dark:rounded-t-none dark:bg-listitem;
   grid-area: chat-message;
   min-width: 0;
 }
 
+.chat-message-item .chat-title {
+  @apply dark:grow shrink-0 dark:mr-md;
+}
+
 .chat-message .message-banner {
   @apply relative flex flex-row items-center py-xxs pl-xs -mx-xs -mt-xs mb-xs text-white bg-info border-b border-white rounded-t;
   &::before {
@@ -101,6 +116,7 @@ img.chat-avatar {
 /*///// Your message /////*/
 
 .chat-message-item.your-message {
+  @apply dark:pl-lg;
   grid-template-areas:  "chat-header chat-header chat-avatar "
                         "chat-actions chat-message chat-avatar";
   grid-template-columns: 1fr auto auto;
@@ -108,7 +124,7 @@ img.chat-avatar {
 }
 
 .chat-message-item.your-message img.chat-avatar {
-  @apply ml-xs mr-0;
+  @apply ml-xs mr-0 dark:ml-md;
 }
 
 .chat-message-item.your-message .chat-actions {
@@ -116,12 +132,16 @@ img.chat-avatar {
 }
 
 .chat-message-item.your-message .chat-header {
-  @apply justify-end;
+  @apply justify-end dark:justify-between;
   text-align: end;
 }
 
+.chat-message-item.your-message .chat-title {
+  @apply dark:text-left;
+}
+
 .chat-message-item.your-message .chat-message {
-  @apply text-white bg-primary dark:bg-gray-600;
+  @apply text-white bg-primary dark:bg-listitem;
 }
 
 .chat-message-item.your-message .chat-message-addons .btn {
@@ -267,3 +287,91 @@ img.chat-avatar {
   @apply absolute bottom-md sm:bottom-spacing right-xxs;
   z-index: 1;
 }
+
+
+/*///// Collapsable message /////*/
+
+.chat-message-item.collapsable {
+  @apply grid-cols-2 cursor-pointer;
+  grid-template-columns: auto 1fr;
+}
+
+.chat-message-item.collapsable.your-message {
+  @apply w-full;
+  grid-template-columns: 1fr auto;
+}
+
+.chat-message-item.collapsable > details {
+  @apply col-span-2;
+  grid-area: chat-header;
+}
+
+.chat-message-item.collapsable > details .chat-header {
+  @apply rounded-b cursor-pointer;
+  padding-left: 40px;
+}
+
+.chat-message-item.collapsable > details summary::before {
+  @apply absolute inline-block shrink-0 w-icon h-icon left-xs mr-xxs bg-label-color;
+  content: "";
+  mask-repeat: no-repeat;
+  mask-image: url("/assets/images/icons/triangle-centered-right.svg");
+  top: 8px;
+}
+
+.chat-message-item.collapsable > details[open] .chat-header::before {
+  mask-image: url("/assets/images/icons/triangle-centered-down.svg");
+}
+
+.chat-message-item.collapsable > details[open] .chat-header {
+  @apply rounded-b-none;
+}
+
+.chat-action-row {
+  @apply flex flex-row pl-lg;
+}
+
+.chat-action-row .btn {
+  @apply mr-xs;
+}
+
+
+/*///// Chat form /////*/
+
+.chat-form-row {
+  @apply grid grid-cols-2 pl-lg;
+  grid-template-columns: 1fr auto;
+}
+
+.chat-form {
+  @apply bg-gray-darkest p-md rounded border border-bordercolor;
+}
+
+.chat-form-row .chat-avatar {
+  @apply ml-md mr-0;
+  grid-area: initial;
+}
+
+.chat-form .form-actions {
+  @apply flex flex-row mt-md;
+}
+
+.chat-form .form-actions .btn {
+  @apply mr-xs;
+}
+
+
+/*///// Chat history /////*/
+
+.chat-history-header {
+  @apply flex justify-center items-center w-full text-center text-label font-semibold text-gray-darker uppercase cursor-pointer bg-gray-darkest rounded-full hover:bg-link-hover hover:text-link-hover;
+  height: 12px;
+}
+
+.chat-history-collapsable[open] .chat-history-header {
+  @apply mb-md;
+}
+
+.chat-history-title {
+  @apply w-auto px-xs bg-card;
+}

package/src/assets/stylesheets/components/divider.css

@@ -0,0 +1,3 @@
+.divider {
+  @apply h-1px border-t border-bordercolor my-spacing;
+}

package/src/assets/stylesheets/components/forms.css

@@ -1,5 +1,5 @@
 .form-group {
-  @apply relative grid grid-cols-1 md:grid-cols-1-3 md:gap-grid-gutter;
+  @apply relative grid grid-cols-1 md:grid-cols-1-3 md:gap-xs md:gap-grid-gutter;
 }
 
 .form-label {

package/src/assets/stylesheets/components/layout.css

@@ -43,5 +43,5 @@ html, body {
 }
 
 .centered-content {
-  @apply w-full max-w-centered-content;
+  @apply relative w-full max-w-centered-content h-fit overflow-hidden lg:pt-body-padding-desktop;
 }

package/src/assets/stylesheets/components/list_item.css

@@ -71,8 +71,22 @@ a.listitem:hover {
   mask-image: url("/assets/images/icons/arrow-up.svg");
 }
 
+.dark .listitem .collapse-btn:after {
+  @apply w-icon bg-label-color;
+  mask-image: url("/assets/images/icons/triangle-centered-left.svg");
+}
+
+.dark .listitem[open] > .listitem-header .collapse-btn:after {
+  mask-image: url("/assets/images/icons/triangle-centered-down.svg");
+}
+
+.dark .listitem .collapse-btn:hover:after {
+  @apply bg-white;
+}
+
+
 .listitem-badge {
-  @apply flex justify-center items-start w-btn p-xxs pt-xs text-white bg-black dark:bg-gray-700 rounded-l;
+  @apply flex justify-center items-start w-btn p-xxs pt-xs text-white dark:font-bold dark:text-heading-5 dark:leading-none bg-black dark:bg-gray-750 rounded-l;
   grid-area: badge;
 }
 
@@ -302,3 +316,22 @@ a.listitem:hover {
 .listitem-with-footer .listitem-footer .btn-square {
   @apply flex-auto flex-grow-0 flex-shrink-0;
 }
+
+/*///// Attachments /////*/
+
+.listitem-attachments {
+  @apply grid grid-cols-2 gap-xs place-content-start;
+  grid-template-columns: auto auto;
+}
+
+.listitem-attachments .attachment {
+  @apply h-full w-auto max-h-spacing-4xl;
+}
+ 
+.listitem-attachments .attachment .attachment-thumb {
+  @apply h-full w-auto;
+}
+
+.listitem-attachments .attachment .attachment-thumb img {
+  @apply h-full w-auto;
+}

package/src/assets/stylesheets/components/lists.css

@@ -14,7 +14,7 @@
 /*/////// Description List ///////*/
 
 dl dd {
-  @apply mb-xs last:mb-0;
+  @apply mb-xs last:mb-0 leading-4;
 }
 
 dl.list-inline {
@@ -23,11 +23,11 @@ dl.list-inline {
 }
 
 dl.list-inline dt {
-  @apply pr-spacing;
+  @apply pr-spacing dark:pr-xs dark:text-label-color;
 }
 
 dl.list-inline dd {
-  @apply mb-0;
+  @apply mb-0 leading-tight break-all;
 }
 
 dl.list-inline.responsive {

package/src/assets/stylesheets/components/splitview.css

@@ -124,10 +124,14 @@
 }
 
 .splitview-details-header {
-  @apply grid gap-xs mb-md;
+  @apply grid gap-xs mb-md dark:mb-xxs;
   grid-template-columns: auto 1fr auto;
 }
 
+.dark .splitview-details-header {
+  grid-template-columns: 1fr auto;
+}
+
 .splitview-details-title {
   @apply text-heading-3 dark:text-card-header;
 }
@@ -177,6 +181,15 @@
   }
 }
 
+.meta-info-row {
+  @apply grid grid-cols-2 gap-spacing place-content-start place-items-start mb-md text-label-color;
+  grid-template-columns: auto auto;
+}
+
+.meta-info-row .label {
+  @apply pt-1px;
+}
+
 .splitview-details-content-grid {
   @apply grid gap-xs mb-md;
 
@@ -219,7 +232,7 @@
 }
 
 .splitview-item.selected {
-  @apply text-white bg-info dark:bg-listitem dark:border-r-4 border-link-hover;
+  @apply text-white bg-info dark:bg-listitem dark:border-r-4 border-link-hover dark:rounded-r-none;
 
   .splitview-item-checkbox input {
     @apply border-white;
@@ -234,6 +247,7 @@
 
 body:not(.dark) .splitview-item.selected {
   .splitview-item-icon, 
+  .splitview-item-icon::before, 
   .splitview-item-metainfo {
     @apply text-white;
   }
@@ -279,9 +293,10 @@ body:not(.dark) .splitview-item.selected {
 }
 
 .splitview-item-text {
-  @apply pr-xs;
+  @apply pr-xs dark:text-white font-normal;
   grid-area: split-text;
   line-height: 1.3;
+  line-break: anywhere;
 }
 
 .splitview-item-title {
@@ -321,6 +336,7 @@ body:not(.dark) .splitview-item.selected {
   @apply bg-white;
 }
 
+
 /*///// Collapsable splitview item/group /////*/
 
 .splitview-group {
@@ -358,17 +374,39 @@ body:not(.dark) .splitview-item.selected {
   @apply pl-[65px] dark:pl-lg dark:rounded-none dark:last:rounded-b;
 }
 
+.splitview-group .turbo-wrapper {
+  @apply contents;
+}
+
+.splitview-group .turbo-wrapper .splitview-item:not(summary) {
+  @apply rounded-none;
+}
+
+.splitview-group .turbo-wrapper:last-child .splitview-item {
+  @apply rounded-b;
+}
+
+.splitview-group .turbo-wrapper:last-child .splitview-item.selected {
+  @apply rounded-br-none;
+}
 
 /*///// Grid split /////*/
 
 .grid-splitview {
-  @apply grid grid-cols-2 lg:grid-cols-5 gap-grid-gutter;
+  @apply grid md:grid-cols-2 lg:grid-cols-5 gap-grid-gutter;
+  grid-template-areas: "splitview-list"
+                       "splitview-details";
+
+  @media (width >= theme(--breakpoint-md)) {
+    grid-template-areas: "splitview-list splitview-details";
+  }
 }
 
 .grid-splitview .splitview-list {
-  @apply col-span-1 lg:col-span-2 overflow-y-visible;
+  @apply lg:col-span-2 overflow-y-visible h-fit;
+  max-height: auto;
 }
 
 .grid-splitview .splitview-details {
-  @apply flex flex-col col-span-1 lg:col-span-3 overflow-y-visible;
-}
+  @apply block lg:col-span-3 h-auto min-h-auto overflow-y-visible;
+}

package/src/assets/stylesheets/components/tags.css

@@ -7,14 +7,13 @@
 }
 
 .tag {
-  @apply inline-flex items-center flex-row h-md px-xs text-sm leading-none bg-tag text-appbody-textcolor rounded;
-  padding-top: 2px;
-  padding-bottom: 2px;
+  @apply inline-flex items-center flex-row px-xs dark:px-sm text-sm dark:text-base leading-normal bg-tag text-appbody-textcolor rounded;
+  padding-top: 3px;
+  padding-bottom: 3px;
 }
 
 .tag .icon {
-  height: var(--font-size-icon-xs);
-  font-size: var(--font-size-icon-xs);
+  @apply mr-icon-spacing h-icon-xs dark:h-icon text-icon-xs dark:text-icon;
 }
 
 .tag.sm {
@@ -36,7 +35,7 @@
 }
 
 .tag.popover-tag:hover {
-  @apply bg-link-hover text-white;
+  @apply bg-link-hover! text-white;
 }
 
 .tag.popover-tag .icon {
@@ -46,5 +45,21 @@
 }
 
 .tag.popover-tag:hover .icon {
-  @apply text-white;
+  @apply text-white!;
+}
+
+.tag.success {
+  @apply bg-success text-black;
+}
+
+.tag.danger {
+  @apply bg-danger text-white;
+}
+
+.tag.pending {
+  @apply bg-pending text-black;
+}
+
+.tag.light {
+  @apply bg-gray-lightest dark:bg-gray-darker text-black dark:text-white;
 }

package/src/assets/stylesheets/components/typography.css

@@ -53,7 +53,7 @@ code {
 }
 
 .label, .form-label, dt {
-  @apply text-label-color text-label font-semibold;
+  @apply text-label-color text-label font-semibold dark:uppercase;
 }
 
 .link-with-icon {

package/src/assets/stylesheets/components/uploads.css

@@ -21,7 +21,7 @@
   @apply relative inline-flex flex-col h-auto w-xxl overflow-visible rounded;
 
   & .attachment-thumb {
-    @apply relative flex justify-center items-center w-xxl h-xxl overflow-hidden border-1 border-primary bg-primary rounded text-white;
+    @apply relative flex justify-center items-center w-xxl h-xxl overflow-hidden border-1 border-primary bg-primary rounded text-white dark:border-bordercolor;
 
     & .icon {
       @apply text-icon-lg;

package/src/assets/stylesheets/tailwind_config.css

@@ -65,6 +65,8 @@
   --color-bordercolor-dark: #D4D6DC;
   --color-success: #8cbd24;
   --color-danger: #ec0404;
+  --color-blocked: #f48d21;
+  --color-pending: #888888;
   --color-disabled: #bfc1c5;
   --color-disabled-dark: #5f656d;
   --color-placeholder: #bfc1c5;

package/src/assets/stylesheets/tailwind_theme_dark.css

@@ -15,7 +15,7 @@
     --color-disabled: #5f656d;
     --color-listitem: #343A40;
     --color-placeholder: #5f656d;
-    --color-tag: #5f656d;
+    --color-tag: #262626;
     --color-label-color: #888888;
     --color-success: #33BA9E;
     --color-danger: #FF3131;
@@ -36,6 +36,7 @@
 
     
     /*//// Fontsize ////*/
-    --fontsize-card-header: 18px;
+    --fontsize-card-header: 1.125rem;
+    --font-size-label: 0.75rem;
   }
 }

package/src/pages/agenticqa/chat_collapsable.haml

@@ -0,0 +1,29 @@
+---
+tags: agenticqa
+title: Chat collapsable
+---
+
+.list-chat-messages.full-width
+  .chat-message-item.collapsable
+    %details
+      %summary.chat-header
+        %span.chat-title.label Collapsable message
+        %span.label 5 mins ago
+      .chat-message
+        Here's a short message.
+  .chat-message-item.collapsable
+    %img.chat-avatar{src:"/assets/images/profilepic_testinator.png"}
+    %details
+      %summary.chat-header
+        %span.chat-title.label Collapsable message
+        %span.label 5 mins ago
+      .chat-message
+        Here's a long message with mountains of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+  .chat-message-item.collapsable.your-message
+    %img.chat-avatar{src:"/assets/images/placeholders/profile_supergirl.png"}
+    %details
+      %summary.chat-header
+        %span.chat-title.label Collapsable message
+        %span.label 5 mins ago
+      .chat-message
+        Here's a long message with mountains of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

package/src/pages/agenticqa/chat_form.haml

@@ -0,0 +1,15 @@
+---
+tags: agenticqa
+title: Chat form
+---
+
+.chat-form-row
+  %form.chat-form
+    %h5.text-card-header.mb-xxs Re-Run this check
+    %p.font-light.mb-md Add additional instructions for re-running this check.
+    %textarea.form-control{placeholder:"Add your instructions or feedback for Testinator"}
+    .form-actions
+      %a.btn.btn-primary.rounded-full
+        %span.icon.icon-sync.mr-icon-spacing
+        re-run check
+      %button.btn.btn-secondary.rounded-full Cancel