testio-tailwind 3.6.0 → 3.8.0

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);
@@ -89,3 +90,6 @@
 /*//// Design system styles ////*/
 @import './components/designsystem/designsystem-styles.css' layer(components);
 
+/*//// Agentic QA components ////*/
+@import './components/agenticqa/agenticqa_header.css' layer(components);
+@import './components/agenticqa/agenticqa_sidebar.css' layer(components);

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

@@ -0,0 +1,37 @@
+
+.header.agenticqa {
+  @apply justify-center shadow border-b-1 border-bordercolor;
+  height: 70px;
+}
+
+.header.agenticqa .header-wrapper {
+  @apply flex justify-between items-center w-full max-w-centered-content;
+}
+  
+
+.header.agenticqa .navlink.header-logo {
+  @apply h-auto;
+}
+
+.header.agenticqa .header-logo::before {
+  content: url("/assets/images/logo_agenticqa/agenticqa_logo_purpleteal_white.svg");
+  height: 34px;
+  @media (width >= theme(--breakpoint-sm)) {
+    width: 142px;
+  }
+}
+
+.header.agenticqa .navlink {
+  @apply px-sm py-xxs uppercase rounded-full hover:bg-link-hover;
+  height: 34px;
+}
+
+.header.agenticqa .navlink.active {
+  @apply bg-transparent text-white hover:bg-link-hover;
+}
+
+.header.agenticqa .navlink.active::after {
+  @apply absolute block left-sm right-sm bottom-0 bg-link-hover;
+  content: '';
+  height: 2px;
+}

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

@@ -0,0 +1,12 @@
+
+.agenticqa .mobile-menu.sidebar {
+  @apply pt-spacing;
+}
+
+.agenticqa .mobile-menu.sidebar .navlink {
+  @apply items-center h-auto py-xs mb-sm leading-none;
+}
+
+.agenticqa .mobile-menu.sidebar .navlink:hover::after {
+  content: none;
+}

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 form /////*/
+
+.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-white;
+  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;
+}