testio-tailwind 3.11.0 → 3.13.0

package/package.json

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

package/src/assets/images/icons/info.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 8 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <rect id="info" x="0" y="0" width="8" height="20" style="fill:none;"/>
+    <clipPath id="_clip1">
+        <rect x="0" y="0" width="8" height="20"/>
+    </clipPath>
+    <g clip-path="url(#_clip1)">
+        <path d="M2,6L6.001,6L6.001,2L2,2L2,6ZM0,8L0,10L2,10L2,16L0,16L0,18L8,18L8,16L6,16L6,8L0,8Z" style="fill-rule:nonzero;"/>
+    </g>
+</svg>

package/src/assets/stylesheets/app.css

@@ -72,6 +72,7 @@
 @import './components/typography.css' layer(components);
 @import './components/uploads.css' layer(components);
 @import './components/user_item.css' layer(components);
+@import './components/form_hint.css' layer(components);
 
 /*//// Customer components ////*/
 @import './components/customer/customer_header.css' layer(components);
@@ -93,4 +94,5 @@
 /*//// Agentic QA components ////*/
 @import './components/agenticqa/agenticqa_header.css' layer(components);
 @import './components/agenticqa/agenticqa_sidebar.css' layer(components);
-@import './components/agenticqa/agenticqa_pageheader.css' layer(components);
+@import './components/agenticqa/agenticqa_pageheader.css' layer(components);
+@import './components/agenticqa/agenticqa_status_stepper.css' layer(components);

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

@@ -4,11 +4,11 @@
 }
 
 .page-header .page-maincard {
-  @apply md:col-span-2 lg:col-span-3 xl:col-span-4;
+  @apply sm:col-span-2 md:col-span-2 lg:col-span-3 xl:col-span-4;
 }
 
 .page-header.with-chart .page-maincard {
-  @apply md:col-span-1 lg:col-span-2 xl:col-span-3;
+  @apply sm:col-span-1 md:col-span-1 lg:col-span-2 xl:col-span-3;
 } 
 
 .page-header.with-chart .page-actions {
@@ -40,7 +40,7 @@
 }
 
 .page-actions {
-  @apply flex flex-row md:flex-col h-full;
+  @apply flex flex-row md:flex-col h-full sm:col-span-2 md:col-span-1;
 }
 
 .page-actions .btn {

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

@@ -0,0 +1,20 @@
+
+.status-stepper {
+  @apply flex flex-row items-stretch justify-stretch w-full;
+}
+
+.status-stepper .status-step {
+  @apply flex flex-row justify-center items-center shrink-0 mr-xs last:mr-0 px-md py-xs grow-0 rounded text-label-color leading-none bg-black;
+}
+
+.status-stepper .status-step.active {
+  @apply grow-1 text-white bg-gray-750;
+}
+
+.status-step .icon {
+  @apply mr-xs text-label-color;
+}
+
+.status-step .counter {
+  @apply pr-xs text-lg font-bold text-label-color leading-none;
+}

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

@@ -1,5 +1,5 @@
 .form-grid {
-  @apply grid gap-xs;
+  @apply grid gap-formgrid;
   grid-template-columns: 1fr;
 }
 

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

@@ -0,0 +1,71 @@
+
+.hint-text {
+  @apply flex-1 mt-1 text-label whitespace-normal;
+}
+
+.hint-group {
+  @apply flex flex-wrap text-label;
+}
+
+.hint-group p {
+  @apply text-label;
+}
+
+.form-hint {
+  @apply relative flex items-start text-sm mt-xs mb-xs pl-md dark:text-label-color;
+
+  &::before {
+    @apply absolute left-0 inline-block h-icon w-icon mr-xs bg-gray;
+    content: "";
+    flex-shrink: 0;
+    mask-image: url("/assets/images/icons/info.svg");
+    mask-repeat: no-repeat;
+  }
+
+  &.error::before {
+    @apply bg-danger;
+  }
+
+  &.error {
+    @apply text-danger;
+  }
+}
+
+.dark .form-hint::before {
+  @apply absolute left-0 bg-label-color;
+  mask-image: url("/assets/images/icons/info.svg");
+  top: -2px;
+}
+
+.dark .form-hint.error::before {
+  @apply bg-danger;
+}
+
+.form-hint-collapsable {
+  @apply relative block mt-xs whitespace-normal;
+}
+
+.form-hint-collapsable .form-hint {
+  @apply relative;
+}
+
+.form-hint-trigger {
+  @apply inline ml-xs text-primary hover:text-link-hover text-sm font-semibold cursor-pointer;
+}
+
+.form-hint-expanded-text {
+  @apply hidden;
+}
+
+details.form-hint-collapsable[open] summary .form-hint-collapsed-text {
+  @apply hidden;
+}
+
+details.form-hint-collapsable[open] summary .form-hint-expanded-text {
+  @apply inline items-center;
+}
+
+.form-hint-collapsable-message {
+  @apply w-full z-1 mt-xs mb-sm rounded px-3 py-2.5 text-left text-sm text-appbody-textcolor bg-listitem;
+}
+

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

@@ -49,27 +49,6 @@
   @apply inline-block;
 }
 
-.form-hint {
-  @apply flex items-center text-sm mt-xs mb-xs;
-
-  &::before {
-    @apply inline-block h-icon w-icon mr-xs bg-gray;
-    content: "";
-    flex-shrink: 0;
-    mask-image: url("/assets/images/icons/exclamation-circle.svg");
-    mask-repeat: no-repeat;
-  }
-
-  &.error::before {
-    @apply bg-danger;
-    mask-image: url("/assets/images/icons/exclamation-circle.svg");
-  }
-
-  &.error {
-    @apply text-danger;
-  }
-}
-
 textarea.form-control {
   @apply h-auto min-h-btn pt-xs;
 }

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

@@ -86,7 +86,7 @@ a.listitem:hover {
 
 
 .listitem-badge {
-  @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;
+  @apply flex justify-center items-center w-btn px-xxs py-xxs text-white dark:font-bold dark:text-heading-5 dark:leading-none bg-black dark:bg-gray-750 rounded-l;
   grid-area: badge;
 }
 

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

@@ -41,7 +41,7 @@
 }
 
 .form-search .btn-submit {
-  @apply right-0 bg-primary;
+  @apply right-0 bg-primary dark:text-black;
   &::before {
     @apply bg-white;
   }
@@ -54,6 +54,14 @@
   mask-image: url("/assets/images/icons/search.svg");
 }
 
+.dark .form-search .btn-submit::before {
+  @apply bg-black;
+}
+
+.dark .form-search .btn-submit:hover::before {
+  @apply bg-white;
+}
+
 .form-search.direct-input {
   &::before {
     @apply absolute inline-block w-icon h-icon top-xs left-xs bg-gray;

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

@@ -72,8 +72,7 @@
 .selectable-token input:disabled + label,
 .selectable-token input.disabled + label,
 .selectable-token input.disabled:checked + label {
-  @apply text-disabled border-disabled bg-transparent cursor-not-allowed;
-  background-image: url("/assets/images/pattern-striped-bright.png");
+  @apply text-disabled border-disabled bg-transparent cursor-not-allowed bg-pattern-disabled dark:bg-pattern-disabled-dark dark:border-bordercolor;
   background-repeat: repeat;
 
   &::after {
@@ -94,8 +93,7 @@
 .selectable-token.inverted input:disabled + label,
 .selectable-token.inverted input.disabled + label,
 .selectable-token.inverted input.disabled:checked + label {
-  @apply text-disabled-dark border-disabled-dark;
-  background-image: url("/assets/images/pattern-striped-dark.png");
+  @apply text-disabled-dark border-disabled-dark bg-pattern-disabled-dark dark:border-bordercolor;
 
   &::after {
     @apply bg-disabled-dark;
@@ -160,8 +158,7 @@
   background-image: none;
 
   & .icon {
-    @apply text-disabled border-disabled bg-transparent;
-    background-image: url("/assets/images/pattern-striped-bright.png");
+    @apply text-disabled border-disabled bg-transparent bg-pattern-disabled dark:bg-pattern-disabled-dark dark:border-bordercolor;
     background-repeat: repeat;
   }
 
@@ -180,8 +177,7 @@
   background-image: none;
 
   & .icon {
-    @apply text-disabled-dark border-disabled-dark bg-transparent;
-    background-image: url("/assets/images/pattern-striped-dark.png");
+    @apply text-disabled-dark border-disabled-dark bg-transparent bg-pattern-disabled dark:bg-pattern-disabled-dark dark:border-bordercolor;
     background-repeat: repeat;
   }
 }

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

@@ -390,6 +390,18 @@ body:not(.dark) .splitview-item.selected {
   @apply rounded-br-none;
 }
 
+.splitview-group-status {
+  @apply pl-lg pr-md py-xs bg-listitem border-b border-appbody;
+}
+
+.splitview-btn {
+  @apply w-full justify-center text-label text-label-color;
+}
+
+.splitview-group .splitview-btn {
+  @apply bg-listitem rounded-t-none rounded-b;
+}
+
 /*///// Grid split /////*/
 
 .grid-splitview {

package/src/assets/stylesheets/plugin_themes/markdown_trix_styles.css

@@ -202,3 +202,19 @@
     background-color: transparent;
   }
 }
+
+/*//// Dark mode styles ////*/
+
+.dark .markdown, .dark .trix-content {
+  code {
+    @apply text-label-color bg-tag;
+  }
+  pre {
+    @apply text-label-color bg-tag;
+  }
+  ol > li::before {
+    @apply bg-label-color;
+  }
+}
+
+  

package/src/assets/stylesheets/plugin_themes/trix_editor.css

@@ -59,6 +59,17 @@ trix-toolbar .trix-button {
   }
 }
 
+trix-toolbar .trix-button:disabled {
+  @apply text-disabled hover:text-disabled cursor-not-allowed opacity-100 hover:opacity-100;
+  &::before {
+    @apply bg-disabled opacity-100;
+  }
+}
+
+trix-toolbar .trix-button:disabled:hover::before {
+  @apply bg-disabled;
+}
+
 trix-toolbar .trix-button--icon::before {
   content: "";
   opacity: 1;
@@ -175,13 +186,6 @@ trix-editor .attachment__progress {
 
 /*///// Validation errors /////*/
 
-.field_with_errors {
-  trix-toolbar {
-    @apply mb-5;
-  }
-
-  .trix-content,
-  select {
-    @apply border-red-500 border-1;
-  }
+.field_with_errors .trix-content {
+  @apply mt-0 border-red-500 border-1;
 }

package/src/assets/stylesheets/tailwind_config.css

@@ -193,6 +193,7 @@
   --spacing-actionbar: 4.375rem;
   --spacing-aside: 12.5rem;
   --spacing-sidebar: 12.5rem;
+  --spacing-formgrid: 0.625rem;
   --spacing-grid-gutter: 1.25rem;
   --spacing-13: 3.25rem;
   --spacing-30: 7.25rem;

package/src/assets/stylesheets/tailwind_custom_utilities.css

@@ -286,6 +286,7 @@
 
 
 /* Background image */
+@utility bg-pattern-disabled { background-image: url('/assets/images/pattern-striped-bright.png'); }
 @utility bg-pattern-disabled-bright { background-image: url('/assets/images/pattern-striped-bright.png'); }
 @utility bg-pattern-disabled-dark { background-image: url('/assets/images/pattern-striped-dark.png'); }
 

package/src/assets/stylesheets/tailwind_theme_dark.css

@@ -13,7 +13,7 @@
     --color-bordercolor: #2E2E2E;
     --color-card: #262626;
     --color-disabled: #5f656d;
-    --color-listitem: #343A40;
+    --color-listitem: #262626;
     --color-placeholder: #5f656d;
     --color-tag: #262626;
     --color-label-color: #888888;
@@ -25,7 +25,7 @@
     --color-info: #326dd1;
     --color-dark: #222222;
     --color-card: #1D1D1D;
-    --color-listitem: #262626;
+    
 
     /*//// Border radius ////*/
     --radius: 12px;
@@ -33,7 +33,7 @@
     /*//// Spacing ////*/
     --card-padding: 30px;
     --spacing-grid-gutter: 40px;
-
+    --spacing-formgrid: 1.25rem;
     
     /*//// Fontsize ////*/
     --fontsize-card-header: 1.125rem;

package/src/pages/agenticqa/splitview_items.haml

@@ -0,0 +1,63 @@
+---
+tags: agenticqa
+title: Splitview items
+---
+
+.card.p-card-padding
+  %nav.nav-tabs
+    .navlink.active{href:""} 11 Pages
+    .navlink{href:""} 6 Checks
+  %details.splitview-group
+    %summary.splitview-item.unread
+      .splitview-item-icon.icon.icon-circle-empty.text-chart-empty
+      .splitview-item-text
+        .splitview-item-title https://www.bando.com/collections/writing-supplies/products/retro-pen-set
+      .splitview-item-status
+        .text-with-icon
+          .icon.icon-sync
+          executing checks
+    .splitview-group-status.status-stepper
+      .status-step.completed
+        .icon.icon-check-thick-centered
+        3 done
+      .status-step.active
+        .icon.icon-sync
+        Executing checks
+      .status-step
+        + 3 to do
+    .splitview-item.selected
+      .splitview-item-icon.icon.icon-cross-circle-filled.danger
+      .splitview-item-text Check title
+    .splitview-item.unread
+      .splitview-item-icon.icon.icon-check-circle-filled.success
+      .splitview-item-text Check title with an endless amount of really long lorem ipsum
+    .splitview-item.unread
+      .splitview-item-icon.icon.icon-blocked.blocked
+      .splitview-item-text Check title with a lot of lorem ipsum
+    .splitview-item.unread
+      .splitview-item-icon.icon.icon-sync.pending
+      .splitview-item-text Check title with a lot of lorem ipsum
+  %details.splitview-group
+    %summary.splitview-item
+      .splitview-item-icon.icon.icon-circle-empty.text-chart-empty
+      .splitview-item-text
+        .splitview-item-title https://url.com
+    .splitview-group-status.status-stepper
+      .status-step.active
+        Pending start
+      .status-step
+        + 6 to do
+    %turbo-frame.turbo-wrapper
+      %a.splitview-item
+        .splitview-item-icon.icon.icon-check-circle-filled.success
+        .splitview-item-text Navigation Menu Hover
+    %turbo-frame.turbo-wrapper
+      %a.splitview-item
+        .splitview-item-icon.icon.icon-cross-circle-filled.danger
+        .splitview-item-text No Results Message
+    %turbo-frame.turbo-wrapper
+      %a.splitview-item
+        .splitview-item-icon.icon.icon-check-circle-filled.success
+        .splitview-item-text Main Product Image
+    %btn.btn.splitview-btn Show 99 dismissed checks
+  %btn.btn.splitview-btn Show 99 dismissed pages

package/src/pages/agenticqa/status_stepper.haml

@@ -0,0 +1,25 @@
+---
+tags: agenticqa
+title: Status stepper
+---
+
+.status-stepper
+  .status-step.completed
+    .icon.icon-check-thick-centered
+    3 done
+  .status-step.active
+    .icon.icon-sync
+    Executing checks
+  .status-step
+    + 3 to do
+.py-md
+.status-stepper
+  .status-step.completed
+    .counter 99
+    Completed
+  .status-step.active
+    .counter 99
+    Active
+  .status-step
+    .counter 99
+    Initial

package/src/pages/forms/form_hint.haml

@@ -0,0 +1,41 @@
+---
+tags: "forms"
+title: Form hint
+---
+
+.form-grid
+  .form-group
+    %label.form-label Input with form hint
+    %div
+      %input.form-control{type:'text', placeholder:"Some delicious placeholder text"}
+      .form-hint Form-hint with some helpful 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.
+  .form-group
+    .field_with_errors
+      %label.form-label Input with errors
+    .field_with_errors
+      %input.form-control{type:'text', placeholder:"Some delicious placeholder text"}
+      .form-hint.error You made a mistake, which is why you see this form validation error message with some helpful 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.
+  .form-group
+    %label.form-label Collapsable form hint
+    .col
+      %input.form-control{type:'text', placeholder:"Some delicious placeholder text"}
+      %details.form-hint-collapsable
+        %summary
+          .form-hint
+            %span
+              This is a help text.
+              %span.form-hint-trigger.form-hint-collapsed-text Learn more
+              %span.form-hint-trigger.form-hint-expanded-text Close
+        .form-hint-collapsable-message Good examples are "Java wrapper lib for our 5-endpoint REST API" or "Help integration Intercom into our web interface"
+  .form-group
+    %label.form-label Collapsable form hint with a long text
+    .col
+      %input.form-control{type:'text', placeholder:"Some delicious placeholder text"}
+      %details.form-hint-collapsable
+        %summary
+          .form-hint
+            %span
+              This is help text with lots of verbose 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.
+              %span.form-hint-trigger.form-hint-collapsed-text Learn more
+              %span.form-hint-trigger.form-hint-expanded-text Close
+        .form-hint-collapsable-message Good examples are "Java wrapper lib for our 5-endpoint REST API" or "Help integration Intercom into our web interface" plus lots of with lots of verbose 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/forms/forms.haml

@@ -18,32 +18,10 @@ title: Forms
   .form-group
     %label.form-label Input disabled
     %input.form-control{type:'text', value:"Some delicious readonly value text", disabled:"true"}
-  .form-group
-    %label.form-label Input with form hint
-    %div
-      %input.form-control{type:'text', placeholder:"Some delicious placeholder text"}
-      .form-hint Form-hint with some helpful 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.
-  .form-group
-    .field_with_errors
-      %label.form-label Input with errors
-    .field_with_errors
-      %input.form-control{type:'text', value:""}
-      .form-hint.error You made a mistake, which is why you see this form validation error message with some helpful 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.
 .form-grid.bg-black.p-3.mt-md
   .form-group.inverted
-    %label.form-label Input
+    %label.form-label Input inverted
     %input.form-control{type:'text', placeholder:"Some delicious placeholder text"}
   .form-group.inverted
-    %label.form-label Input disabled
+    %label.form-label Input inverted disabled
     %input.form-control{type:'text', value:"Some delicious readonly value text", disabled:"true"}
-  .form-group.inverted
-    %label.form-label Input with form hint
-    %div
-      %input.form-control{type:'text', placeholder:"Some delicious placeholder text"}
-      .form-hint Form-hint with some helpful 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.
-  .form-group.inverted
-    .field_with_errors
-      %label.form-label Input with errors
-    .field_with_errors
-      %input.form-control{type:'text', value:""}
-      .form-hint.error You made a mistake, which is why you see this form validation error message with some helpful 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/forms/trix_editor.pug

@@ -3,19 +3,16 @@ tags: "forms"
 title: Trix Editor
 ---
 
-.form-group.trix-editor
-  label.form-label(for='space_branding_full_description') Full description
-  input#space_branding_full_description_trix_input_space_branding_8(type='hidden', name='space_branding[full_description]', value='<h1><strong>Some text before image</strong></h1><div><br><i>some italic text after</i><br><br>LIst&nbsp;</div><ul><li>1<ul><li>2</li></ul></li><li>3<ul><li>4<br><br><br></li></ul></li></ul><div>Numbered list</div><div><br></div><ol><li>one<ol><li>two</li></ol></li><li>three<ol><li>four<br><br></li></ol></li></ol><div>Little bit of code<br><br></div><pre>def add(b, c)\b + c\end</pre>', autocomplete='off')
-  trix-editor#space_branding_full_description.form-control.trix-content
-
-
-p.mt-3 If you have some errors on the field
-
-.form-group.trix-editor
-  .field_with_errors
-    label.form-label(for='space_branding_full_description') Full description
-  .field_with_errors
+.form-grid
+  .form-group.trix-editor
+    label.form-label(for='space_branding_full_description') Trix editor
     input#space_branding_full_description_trix_input_space_branding_8(type='hidden', name='space_branding[full_description]', value='<h1><strong>Some text before image</strong></h1><div><br><i>some italic text after</i><br><br>LIst&nbsp;</div><ul><li>1<ul><li>2</li></ul></li><li>3<ul><li>4<br><br><br></li></ul></li></ul><div>Numbered list</div><div><br></div><ol><li>one<ol><li>two</li></ol></li><li>three<ol><li>four<br><br></li></ol></li></ol><div>Little bit of code<br><br></div><pre>def add(b, c)\b + c\end</pre>', autocomplete='off')
     trix-editor#space_branding_full_description.form-control.trix-content
-    .form-hint.error can't be blank
+  .form-group.trix-editor
+    .field_with_errors
+      label.form-label(for='space_branding_full_description') Error state
+    .field_with_errors
+      input#space_branding_full_description_trix_input_space_branding_8(type='hidden', name='space_branding[full_description]', value='<h1><strong>Some text before image</strong></h1><div><br><i>some italic text after</i><br><br>LIst&nbsp;</div><ul><li>1<ul><li>2</li></ul></li><li>3<ul><li>4<br><br><br></li></ul></li></ul><div>Numbered list</div><div><br></div><ol><li>one<ol><li>two</li></ol></li><li>three<ol><li>four<br><br></li></ol></li></ol><div>Little bit of code<br><br></div><pre>def add(b, c)\b + c\end</pre>', autocomplete='off')
+      trix-editor#space_branding_full_description.form-control.trix-content
+      .form-hint.error can't be blank